> 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).