Migrate Card to the Polaris section component

The Polaris section component replaces the previous Card component and is available as <s-section> in API versions 2025-10 and newer.

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  return (
    <s-section>
      <s-grid
        gridTemplateColumns="1fr auto"
        gap="base"
        alignItems="start"
      >
        <s-stack gap="large-200">
          <s-heading>Addresses</s-heading>
          <s-stack gap="base">
            <s-text color="subdued">Default address</s-text>
            <s-stack gap="small-400">
              <s-text>Kristin Watson</s-text>
              <s-text>1655 Island Pkwy</s-text>
              <s-text>Kamloops BC M7G 672</s-text>
              <s-text>Canada</s-text>
            </s-stack>
          </s-stack>
        </s-stack>
        <s-stack gap="large-200">
          <s-stack direction="inline" alignItems="center" gap="small-100">
            <s-icon type="plus"></s-icon>
            <s-text>Add</s-text>
          </s-stack>
          <s-stack alignItems="end">
            <s-icon type="edit"></s-icon>
          </s-stack>
        </s-stack>
      </s-grid>
    </s-section>
  );
}

import {
  BlockStack,
  Card,
  Grid,
  Heading,
  Icon,
  InlineLayout,
  Text,
  TextBlock,
  View,
  reactExtension,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.page.render',
  () => <Extension />,
);

function Extension() {
  return (
    <Card padding>
      <Grid
        columns={['fill', 'auto']}
        spacing="base"
        minInlineSize="fill"
        blockAlignment="start"
      >
        <BlockStack spacing="loose">
          <Heading>Addresses</Heading>
          <BlockStack spacing="base">
            <Text appearance="subdued">Default address</Text>
            <BlockStack spacing="extraTight">
              <TextBlock>Kristin Watson</TextBlock>
              <TextBlock>1655 Island Pkwy</TextBlock>
              <TextBlock>Kamloops BC M7G 672</TextBlock>
              <TextBlock>Canada</TextBlock>
            </BlockStack>
          </BlockStack>
        </BlockStack>
        <BlockStack spacing="loose">
          <InlineLayout blockAlignment="center">
            <Icon source="plus" size="small" appearance="accent" />
            <Text appearance="accent">Add</Text>
          </InlineLayout>
          <View inlineAlignment="end">
            <Icon source="pen" size="small" appearance="accent" />
          </View>
        </BlockStack>
      </Grid>
    </Card>
  );
}

Anchor to Updated propertiesUpdated properties

The following property is different in the Polaris section component.

Anchor to paddingpadding

Card used a Boolean padding prop. <s-section> uses named padding values instead.

Use padding="base" for the standard padded section layout. Use padding="none" when content inside the section needs to extend to the section edges, such as a full-width image or custom layout.

Anchor to New propertiesNew properties

Anchor to headingheading

<s-section> renders its own heading through the heading prop. Heading levels adjust automatically based on nesting depth, so the document outline stays correct for assistive technologies.

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  return (
    <s-section heading="Addresses">
      <s-text>Kristin Watson</s-text>
    </s-section>
  );
}

import {
  Card,
  Heading,
  TextBlock,
  reactExtension,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.page.render',
  () => <Extension />,
);

function Extension() {
  return (
    <Card padding>
      <Heading>Addresses</Heading>
      <TextBlock>Kristin Watson</TextBlock>
    </Card>
  );
}

Anchor to Further guidanceFurther guidance

Anchor to Recreating bordered visual grouping for nested contentRecreating bordered visual grouping for nested content

The previous Card rendered a visible border and padded surface regardless of where it was placed, including when nested inside another Card. <s-section> applies its surface styling automatically based on context. In customer accounts, <s-section> applies that styling only to top-level sections, and nested <s-section> elements render without their own border. If you relied on a nested Card to create a bordered visual grouping, then recreate it with a layout primitive that exposes border and padding props, such as <s-stack>, <s-grid>, or <s-box>.

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  return (
    <s-section heading="Order summary">
      <s-stack
        border="base"
        borderRadius="base"
        padding="base"
        gap="small-200"
      >
        <s-heading>Shipping address</s-heading>
        <s-text>1655 Island Pkwy</s-text>
        <s-text>Kamloops BC M7G 672</s-text>
      </s-stack>
    </s-section>
  );
}

import {
  Card,
  Heading,
  TextBlock,
  reactExtension,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.page.render',
  () => <Extension />,
);

function Extension() {
  return (
    <Card padding>
      <Heading>Order summary</Heading>
      <Card padding>
        <Heading level={3}>Shipping address</Heading>
        <TextBlock>1655 Island Pkwy</TextBlock>
        <TextBlock>Kamloops BC M7G 672</TextBlock>
      </Card>
    </Card>
  );
}