Migrate View to the Polaris box component

The Polaris box component is a generic container for layout and styling. It replaces the previous View component and is available as <s-box> in API versions 2025-10 and newer.

Anchor to Updated propertiesUpdated properties

The following properties are different in the Polaris box component.

Anchor to visibilityvisibility

The previous View visibility prop is now called accessibilityVisibility.

Anchor to cornerRadiuscornerRadius

The previous View cornerRadius prop is now called borderRadius. Some values have changed:

For more on the scale system, see Scale.

Anchor to borderborder

The previous View border shorthand controlled border style (for example, border="dotted"). On <s-box>, border controls border size by default and accepts a token-based shorthand for size, color, and style:

Anchor to borderWidthborderWidth

The previous View borderWidth accepted 'base', 'medium', 'thick'. The Polaris box borderWidth accepts a reduced keyword set: 'none', 'base', 'large', 'large-100', 'large-200'.

Anchor to displaydisplay

The previous View display values 'inline' and 'block' are no longer accepted. The Polaris box display accepts 'auto' (the default) and 'none'.

Anchor to paddingpadding

The previous View padding prop's accepted values and multi-side shorthand format have changed.

Use the following mapping to migrate deprecated tokens:

The new token scale also adds 'small-500', 'small-300', 'small-100', 'small', 'large', 'large-100', 'large-300', and 'large-400'.

For more on the scale system, see Scale.

The multi-side shorthand format has also changed:

To set padding on a single side or axis, use the new logical-property props instead of padding. See New properties for the full list.

Anchor to SizesSizes

The size properties accept updated values in the Polaris box component. 'fill' has been removed across all of them — use '100%' instead.

Anchor to accessibilityRoleaccessibilityRole

Several accessibilityRole values have been renamed in the Polaris box component. Update them to the new role names:

Other previously supported roles ('main', 'header', 'footer', 'section', 'navigation', 'separator', 'status', 'alert') are accepted unchanged. The Polaris box also adds the following new roles:

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

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

function Extension() {
  return (
    <s-box
      background="subdued"
      padding="base"
      border="base"
      borderRadius="base"
    >
      Card content
    </s-box>
  );
}

import {
  reactExtension,
  View,
  Text,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return (
    <View
      background="subdued"
      padding="base"
      border="base"
      cornerRadius="base"
    >
      <Text>Card content</Text>
    </View>
  );
}

Anchor to Removed propertiesRemoved properties

Anchor to positionposition

The Polaris box component no longer supports position.

Anchor to translatetranslate

The Polaris box component no longer supports translate.

Anchor to blockAlignmentblockAlignment

The Polaris box component no longer supports blockAlignment. Wrap the box in <s-stack> and use alignItems for cross-axis alignment.

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

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

function Extension() {
  return (
    <s-stack alignItems="center">
      <s-text>Centered content</s-text>
    </s-stack>
  );
}

import {
  reactExtension,
  View,
  Text,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return (
    <View blockAlignment="center">
      <Text>Centered content</Text>
    </View>
  );
}

Anchor to inlineAlignmentinlineAlignment

The Polaris box component no longer supports inlineAlignment. Wrap the box in <s-stack> and use justifyContent for main-axis alignment.

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

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

function Extension() {
  return (
    <s-stack justifyContent="end">
      <s-button>Submit</s-button>
    </s-stack>
  );
}

import {
  reactExtension,
  View,
  Button,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return (
    <View inlineAlignment="end">
      <Button>Submit</Button>
    </View>
  );
}

Anchor to opacityopacity

The Polaris box component no longer supports opacity. There's no workaround for this property.

Anchor to borderColorborderColor

The Polaris box component no longer supports borderColor as a separate property. Use the border shorthand instead. See the border section for the accepted patterns.

Anchor to New propertiesNew properties

The Polaris box component introduces the following new properties: