> 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 lay out a horizontal row of components.
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 `InlineStack` together.
```tsx?title: "JavaScript"
import {extend, InlineStack, 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 inlineStack = root.createComponent(InlineStack, {
inlineAlignment: 'center',
spacing: 'loose',
});
inlineStack.appendChild(buildStackText(root));
inlineStack.appendChild(buildStackText(root));
inlineStack.appendChild(buildStackText(root));
root.appendChild(inlineStack);
root.mount();
});
```
```tsx?title: "React"
import React from 'react';
import {extend, render, InlineStack, 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 |
| --- | --- | --- |
| blockAlignment? | "leading" | "center" | "trailing" | "baseline"
| Specifies the block alignment. This affects the vertical flow of elements. Default value: 'leading'
|
| inlineAlignment? | "leading" | "center" | "trailing"
| Specifies the inline alignment. This affects the horizontal flow of elements. Default value: 'leading'
|
| spacing? | Spacing
| Adjust spacing between children. Default value: 'base'
|
## Guidelines
- All children of `InlineStack` 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, `InlineStack` alignment is `'leading’`.
| ✅ Do | 🛑 Don't |
| ----------------------------------------------------------------------------- | ------------------------------------- |
| Keep Inline Stacks shallow. Complex hierarchies have performance penalties | 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).