BlockStack

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

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

root.appendChild(blockStack);

root.mount();

});

import React from 'react';

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

function App() {

return (

<Text>Items to stack</Text>

</BlockStack>

);

}

extend(

'Playground',

render(() => <App />),

);

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();
});

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 />),
);

Anchor to PropsProps

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"`

Anchor to GuidelinesGuidelines

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

Was this page helpful?