> 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](/docs/apps/build/purchase-options/purchase-options-extensions).


Use to achieve no-fuss vertical centering.

A stack is made of flexible items that wrap each of the stack’s children. Options provide control of the alignment and spacing of the items in the stack.
Use `StackItem` to group multiple elements inside a `BlockStack` together.


```ts?title: "JavaScript"

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

function buildStackText(root) {
  const text = root.createComponent(Text);
  text.appendChild('Items to stack');
  return text;
}

extend('Playground', (root) => {
  const blockStack = root.createComponent(BlockStack, {
    inlineAlignment: 'center',
    spacing: 'loose',
  });

  blockStack.appendChild(buildStackText(root));
  blockStack.appendChild(buildStackText(root));
  blockStack.appendChild(buildStackText(root));

  root.appendChild(blockStack);

  root.mount();
});


```

```tsx?title: "React"

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

function App() {
  return (
    <BlockStack inlineAlignment="center" spacing="loose">
      <Text>Items to stack</Text>
      <Text>Items to stack</Text>
      <Text>Items to stack</Text>
    </BlockStack>
  );
}

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


```



## Props
optional = ?

| Name | Type | Description |
| --- | --- | --- |
| inlineAlignment? | <code>"leading" &#124; "center" &#124; "trailing"</code> | Specifies the inline alignment. This affects the horizontal flow of elements. Default value: <code>"leading"</code> |
| spacing? | <code>Spacing</code> | Adjusts spacing between children. Default value: <code>"base"</code> |

## Guidelines

- 📱 All children of `BlockStack` are placed in a single view object, which makes recycling the views expensive and results in poorer performance when scrolling. Consider keeping your Stacks simple.
- By default, `BlockStack` alignment is `'leading’`.

| ✅ Do                                                                         | 🛑 Don't                              |
| ----------------------------------------------------------------------------- | ------------------------------------- |
| Keep Stacks narrow. There is typically more vertical space than horizontal | Use complex and deep Stack layouts |

For more guidelines, refer to Polaris' [Stack best practices](https://polaris.shopify.com/components/layout-and-structure/stack#best-practices).