---
title: Migrate InlineStack to the Polaris stack component
description: >-
  Learn how to migrate the InlineStack component to Polaris web components in
  checkout and customer account UI extensions.
source_url:
  html: >-
    https://shopify.dev/docs/apps/build/checkout/migrate-to-web-components/inline-stack
  md: >-
    https://shopify.dev/docs/apps/build/checkout/migrate-to-web-components/inline-stack.md
---

# Migrate InlineStack to the Polaris stack component

The Polaris stack component arranges children along the block or inline axis. It replaces the previous [`InlineStack`](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/ui-components/structure/inlinestack) component and is available as [`<s-stack>`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/layout-and-structure/stack) in API versions 2025-10 and newer. To match `InlineStack`, set [`direction`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/layout-and-structure/stack#properties-propertydetail-direction)`="inline"`. Note that [`gap`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/layout-and-structure/stack#properties-propertydetail-gap) defaults to `'none'`, whereas `InlineStack` `spacing` defaulted to `'base'`. To preserve the previous spacing, set `gap="base"` explicitly.

## Migrating InlineStack to s-stack

##### Latest (Preact)

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

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

function Extension() {
  return (
    <s-stack direction="inline" gap="base">
      <s-text>First</s-text>
      <s-text>Second</s-text>
    </s-stack>
  );
}
```

##### Pre-Polaris (2025-07)

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

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

function Extension() {
  return (
    <InlineStack spacing="base">
      <Text>First</Text>
      <Text>Second</Text>
    </InlineStack>
  );
}
```

***

## Updated properties

The following properties are different in the Polaris stack component.

### spacing

The previous `InlineStack` `spacing` prop is now called [`gap`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/layout-and-structure/stack#properties-propertydetail-gap), and both the accepted values and the multi-axis syntax have changed.

Use the following mapping to migrate deprecated tokens:

| Previous | New |
| - | - |
| `'none'` | `'none'` |
| `'extraTight'` | `'small-400'` |
| `'tight'` | `'small-200'` |
| `'base'` | `'base'` |
| `'loose'` | `'large-200'` |
| `'extraLoose'` | `'large-500'` |

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](https://shopify.dev/docs/api/checkout-ui-extensions/latest/using-polaris-components#scale).

To set row and column gaps separately, use [`rowGap`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/layout-and-structure/stack#properties-propertydetail-rowgap) and [`columnGap`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/layout-and-structure/stack#properties-propertydetail-columngap) instead of the previous two-value `[Spacing, Spacing]` array.

### block​Alignment

The previous `InlineStack` `blockAlignment` prop is now called [`alignItems`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/layout-and-structure/stack#properties-propertydetail-alignitems), which aligns children on the cross axis.

### inline​Alignment

The previous `InlineStack` `inlineAlignment` prop is now called [`justifyContent`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/layout-and-structure/stack#properties-propertydetail-justifycontent), which aligns children on the main axis.

### corner​Radius

The previous `InlineStack` `cornerRadius` prop is now called [`borderRadius`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/layout-and-structure/stack#properties-propertydetail-borderradius), and the value format has changed.

| Change | Previous | New |
| - | - | - |
| Multi-corner syntax | Array of 2 or 4 values: `['base', 'none']` | Space-separated string: `"base none"` |
| Accepted values | `'none'`, `'small'`, `'base'`, `'large'`, `'fullyRounded'` | `'none'`, `'small-100'`, `'small'`, `'base'`, `'large'`, `'large-100'`, `'max'` |

`fullyRounded` is removed. Use `max` instead.

### border

The previous `InlineStack` `border` shorthand controlled border *style* (for example, `border="dotted"`). On `<s-stack>`, [`border`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/layout-and-structure/stack#properties-propertydetail-border) controls border *size* by default and accepts a token-based shorthand for size, color, and style:

| Pattern | Example | Description |
| - | - | - |
| `'{size}'` | `border="base"` | Border size only. |
| `'{size} {color}'` | `border="base base"` | Border size and color. |
| `'{size} {color} {style}'` | `border="base base dashed"` | Border size, color, and style. |

| Previous value | New value | Migration notes |
| - | - | - |
| `'base'` (single solid border) | `border="base"` | Renders a default-size border. |
| `'dotted'` | `border="base base dotted"` | Specify size and color before style. |
| `'dashed'` | `border="base base dashed"` | Specify size and color before style. |
| `'none'` | `border="none"` or omit | No border. |

### border​Width

The previous `InlineStack` `borderWidth` accepted `'base'`, `'medium'`, `'thick'`. The Polaris stack [`borderWidth`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/layout-and-structure/stack#properties-propertydetail-borderwidth) accepts a reduced keyword set: `'none'`, `'base'`, `'large'`, `'large-100'`, `'large-200'`.

| Previous value | New value | Migration notes |
| - | - | - |
| `'base'` | `'base'` | No change needed. |
| `'medium'` | `'large'` | `'medium'` is removed. |
| `'thick'` | `'large-200'` | `'thick'` is removed. |

### display

The previous `InlineStack` `display` values `'inline'` and `'block'` are no longer accepted. The Polaris stack [`display`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/layout-and-structure/stack#properties-propertydetail-display) accepts `'auto'` (the default) and `'none'`.

| Previous value | New value | Migration notes |
| - | - | - |
| `'block'` | `'auto'` (the default) | Omit `display` for default block-level rendering. |
| `'inline'` | Removed | Wrap inline content in [`<s-text>`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/typography-and-content/text) instead. This advice applies only when migrating `display="inline"` usages — direct text children of `<s-stack>` are still valid for non-inline content. |
| `'none'` | `'none'` | No change needed. |

### padding

The previous `InlineStack` [`padding`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/layout-and-structure/stack#properties-propertydetail-padding) prop's accepted values and multi-side shorthand format have changed.

Use the following mapping to migrate deprecated tokens:

| Previous | New |
| - | - |
| `'none'` | `'none'` |
| `'extraTight'` | `'small-400'` |
| `'tight'` | `'small-200'` |
| `'base'` | `'base'` |
| `'loose'` | `'large-200'` |
| `'extraLoose'` | `'large-500'` |

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](https://shopify.dev/docs/api/checkout-ui-extensions/latest/using-polaris-components#scale).

The multi-side shorthand format has also changed:

| Previous | New |
| - | - |
| Array of 2 or 4 values: `['base', 'none']` | Space-separated string with 1 to 4 values: `"base none"`. The 3-value variant `"block-start inline block-end"` is also supported. |

To set only one axis, use [`paddingBlock`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/layout-and-structure/stack#properties-propertydetail-paddingblock) or [`paddingInline`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/layout-and-structure/stack#properties-propertydetail-paddinginline) instead of `padding`.

### Sizes

The size properties accept updated values in the Polaris stack component. Previous unitless `number` values map to pixels. For example, `300` is now `'300px'`.

| Property | Previous values | New values | Migration notes |
| - | - | - | - |
| [`maxInlineSize`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/layout-and-structure/stack#properties-propertydetail-maxinlinesize) | `number` \| `` `${number}%` `` \| `'fill'` | `` `${number}px` `` \| `` `${number}%` `` \| `'0'` \| `'none'` | `fill` is removed. Use `100%` instead. |
| [`minInlineSize`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/layout-and-structure/stack#properties-propertydetail-mininlinesize) | `number` \| `` `${number}%` `` \| `'fill'` | `` `${number}px` `` \| `` `${number}%` `` \| `'0'` | `fill` is removed. Use `100%` instead. |
| [`maxBlockSize`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/layout-and-structure/stack#properties-propertydetail-maxblocksize) | `number` \| `` `${number}%` `` \| `'fill'` | `` `${number}px` `` \| `` `${number}%` `` \| `'0'` \| `'none'` | `fill` is removed. Use `100%` instead. |
| [`minBlockSize`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/layout-and-structure/stack#properties-propertydetail-minblocksize) | `number` \| `` `${number}%` `` \| `'fill'` | `` `${number}px` `` \| `` `${number}%` `` \| `'0'` | `fill` is removed. Use `100%` instead. |

### accessibility​Role

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

| Previous value | New value |
| - | - |
| `'complementary'` | `'aside'` |
| `'orderedList'` | `'ordered-list'` |
| `'unorderedList'` | `'unordered-list'` |
| `'listItem'` | `'list-item'` |

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

| New role | Description |
| - | - |
| `'list-item-separator'` | Separator between list items. |
| `'generic'` | Generic container. |
| `'none'` | No semantic role. |

**Responsive values:**

If you used `Style.default().when()` to make this property responsive, container queries replace the `Style` helper. Wrap your content in `<s-query-container>` and use `@container` syntax in the property value. Learn more in [Migrate StyleHelper to container queries](https://shopify.dev/docs/apps/build/checkout/migrate-to-web-components/style-helper).

***

## New properties

The Polaris stack component introduces the following new properties:

| New prop | Type | Description |
| - | - | - |
| [`direction`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/layout-and-structure/stack#properties-propertydetail-direction) | `'block'` \| `'inline'` | Sets the main axis. Set to `inline` to match `InlineStack`. |
| [`blockSize`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/layout-and-structure/stack#properties-propertydetail-blocksize) | `` `${number}px` `` \| `` `${number}%` `` \| `'0'` \| `'auto'` | Adjusts the block size of the stack. |
| [`inlineSize`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/layout-and-structure/stack#properties-propertydetail-inlinesize) | `` `${number}px` `` \| `` `${number}%` `` \| `'0'` \| `'auto'` | Adjusts the inline size of the stack. |
| [`alignContent`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/layout-and-structure/stack#properties-propertydetail-aligncontent) | `'normal'` \| `'space-between'` \| `'space-around'` \| `'space-evenly'` \| `'stretch'` \| `'center'` \| `'start'` \| `'end'` | Aligns wrapped rows on the cross axis. |

***