---
title: InlineStack
description: Use to lay out a horizontal row of components.
api_name: product-subscription-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/product-subscription-extensions/components/inlinestack
  md: >-
    https://shopify.dev/docs/api/product-subscription-extensions/components/inlinestack.md
---

ExpandOn this page

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

# InlineStack

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

##### JavaScript

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

##### React

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

***

## Props

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

***

## Guidelines

* 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](https://polaris.shopify.com/components/layout-and-structure/stack#best-practices).

***

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