InlineStack
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.
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.
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();
});
import React from 'react';
import {extend, render, InlineStack, Text} from '@shopify/admin-ui-extensions-react';
function App() {
return (
<InlineStack inlineAlignment="center" spacing="loose">
<Text>Items to stack</Text>
<Text>Items to stack</Text>
<Text>Items to stack</Text>
</InlineStack>
);
}
extend(
'Playground',
render(() => <App />),
);
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();
});
import React from 'react';
import {extend, render, InlineStack, Text} from '@shopify/admin-ui-extensions-react';
function App() {
return (
<InlineStack inlineAlignment="center" spacing="loose">
<Text>Items to stack</Text>
<Text>Items to stack</Text>
<Text>Items to stack</Text>
</InlineStack>
);
}
extend(
'Playground',
render(() => <App />),
);
Anchor to PropsProps
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' |
Anchor to GuidelinesGuidelines
- 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.
Was this page helpful?