---
title: BlockStack
description: Use to achieve no-fuss vertical centering.
api_name: product-subscription-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/product-subscription-extensions/components/blockstack
  md: >-
    https://shopify.dev/docs/api/product-subscription-extensions/components/blockstack.md
---

ExpandOn this page

* [Props](https://shopify.dev/docs/api/product-subscription-extensions/components/blockstack.md#props)
* [Guidelines](https://shopify.dev/docs/api/product-subscription-extensions/components/blockstack.md#guidelines)

# BlockStack

Deprecated

Product subscription app extensions won't be supported as of February 9, 2026. You should migrate existing product subscription app extensions to [purchase options extensions](https://shopify.dev/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.

##### JavaScript

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

##### React

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

***

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

***

* [Props](https://shopify.dev/docs/api/product-subscription-extensions/components/blockstack.md#props)
* [Guidelines](https://shopify.dev/docs/api/product-subscription-extensions/components/blockstack.md#guidelines)