Card

Deprecated

Product subscription app extensions won't be supported as of December 3, 2025. You should migrate existing product subscription app extensions to purchase options extensions.

Cards are used to group similar concepts and tasks together to make Shopify easier for merchants to scan, read, and get things done.

The action API should be used to create actionable components for the card. Cards should be contained, independent, and individual.

import {extend, Card} from '@shopify/admin-ui-extensions';

extend('Playground', (root) => {

const card = root.createComponent(Card, {});

card.appendChild('This is the best extension.');

root.appendChild(card);

root.mount();

});

import React from 'react';

import {extend, render, Card} from '@shopify/admin-ui-extensions-react';

function App() {

return <Card>This is the best extension.</Card>;

}

extend(

'Playground',

render(() => <App />),

);

import {extend, Card} from '@shopify/admin-ui-extensions';

extend('Playground', (root) => {
  const card = root.createComponent(Card, {});

  card.appendChild('This is the best extension.');
  root.appendChild(card);

  root.mount();
});

import React from 'react';
import {extend, render, Card} from '@shopify/admin-ui-extensions-react';

function App() {
  return <Card>This is the best extension.</Card>;
}

extend(
  'Playground',
  render(() => <App />),
);

Anchor to PropsProps

optional = ?

Name	Type	Description
title?	`string`	Title content for the card
sectioned?	`boolean`	Automatically wrap each child component in a `Card.Section`
primaryFooterAction?	`DestructableAction`	Primary action for the card footer
secondaryFooterActions?	`DestructableAction[]`	Secondary actions for the card footer
actions?	`DisableableAction[]`	Card header action

Anchor to DisableableActionDisableableAction

Name	Type	Description
content	`string`	Action label text.
onAction?	`() => void`	Callback for the action.
disabled?	`boolean`

Anchor to DestructableActionDestructableAction

Name	Type	Description
content	`string`	Action label text.
onAction?	`() => void`	Callback for the action.
destructive?	`boolean`	Indicates a dangerous or potentially negative action.

Anchor to GuidelinesGuidelines

📱 Do not nest Cards within another component. This will result in unintended behavior, and will not render correctly

✅ Do	🛑 Don't
Cards should be at the top level of the component hierarchy	Use too many secondary actions

For more guidelines, refer to Polaris' Card best practices.

Was this page helpful?