> 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 (
Items to stack
Items to stack
Items to stack
);
}
extend(
'Playground',
render(() => ),
);
```
## Props
optional = ?
| Name | Type | Description |
| --- | --- | --- |
| inlineAlignment? | "leading" | "center" | "trailing"
| Specifies the inline alignment. This affects the horizontal flow of elements. Default value: "leading"
|
| spacing? | Spacing
| Adjusts spacing between children. Default value: "base"
|
## 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).