---
title: BlockStack
description: BlockStack is used to vertically stack elements.
api_name: checkout-extensions
source_url:
  html: https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/blockstack
  md: https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/blockstack.md
---

# BlockStack

BlockStack is used to vertically stack elements

***

### Example

![blockstack](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/api/checkout-extensions/post-purchase/components/blockstack-CaAqv4ph.png)

```ts
import {extend, BlockStack, View} from '@shopify/post-purchase-ui-extensions';


extend('Checkout::PostPurchase::Render', (root) => {
  const blockStack = root.createComponent(BlockStack, undefined, [
    root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),
    root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),
    root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),
  ]);


  root.appendChild(blockStack);
});
```

```tsx
import {render, BlockStack, View} from '@shopify/post-purchase-ui-extensions-react';


render('Checkout::PostPurchase::Render', () => <App />);


function App() {
  return (
    <BlockStack>
      <View border="base" padding="base">
        View
      </View>
      <View border="base" padding="base">
        View
      </View>
      <View border="base" padding="base">
        View
      </View>
    </BlockStack>
  );
}
```

##### JS

```
import {extend, BlockStack, View} from '@shopify/post-purchase-ui-extensions';

extend('Checkout::PostPurchase::Render', (root) => {
  const blockStack = root.createComponent(BlockStack, undefined, [
    root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),
    root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),
    root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),
  ]);

  root.appendChild(blockStack);
});
```

##### React

```
import {render, BlockStack, View} from '@shopify/post-purchase-ui-extensions-react';

render('Checkout::PostPurchase::Render', () => <App />);

function App() {
  return (
    <BlockStack>
      <View border="base" padding="base">
        View
      </View>
      <View border="base" padding="base">
        View
      </View>
      <View border="base" padding="base">
        View
      </View>
    </BlockStack>
  );
}
```

***

## Props

optional = ?

| Name | Type | Description |
| - | - | - |
| alignment? | `"leading" \| "center" \| "trailing"` | Position children along the cross axis |
| spacing? | `"xtight" \| "tight" \| "loose" \| "xloose"` | Adjust spacing between children |

***