---
title: StackItem
description: 'By default, each individual element in a Stack is treated as one stack item.'
api_name: product-subscription-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/product-subscription-extensions/components/stackitem
  md: >-
    https://shopify.dev/docs/api/product-subscription-extensions/components/stackitem.md
---

ExpandOn this page

* [Props](https://shopify.dev/docs/api/product-subscription-extensions/components/stackitem.md#props)
* [Behavior](https://shopify.dev/docs/api/product-subscription-extensions/components/stackitem.md#behavior)

# StackItem

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

By default, each individual element in a Stack is treated as one stack item.

Wrap multiple elements in a `StackItem` component, and the `Stack` component will treat them as one item.

##### JavaScript

```ts
import {extend, InlineStack, StackItem, Text} from '@shopify/admin-ui-extensions';

extend('Playground', (root) => {
  const stack = root.createComponent(InlineStack);
  const stackItemFill = root.createComponent(StackItem, {fill: true});

  const stackItemText = root.createComponent(Text);
  stackItemText.appendChild('Fill the space');

  const stackItemNoFill = root.createComponent(StackItem);
  const text1 = root.createComponent(Text);
  text1.appendChild('Other text');
  const text2 = root.createComponent(Text);
  text2.appendChild('Even more text');

  stackItemFill.appendChild(stackItemText);
  stack.appendChild(stackItemFill);

  stackItemNoFill.appendChild(text1);
  stackItemNoFill.appendChild(text2);
  stack.appendChild(stackItemNoFill);

  root.appendChild(stack);
  root.mount();
});
```

##### React

```tsx
import React from 'react';
import {extend, render, InlineStack, StackItem, Text} from '@shopify/admin-ui-extensions-react';

function App() {
  return (
    <InlineStack>
      <StackItem fill>
        <Text>Fill the space</Text>
      </StackItem>
      <StackItem>
        <Text>Other text</Text>
        <Text>Even more text</Text>
      </StackItem>
    </InlineStack>
  );
}

extend(
  'Playground',
  render(() => <App />),
);
```

***

## Props

optional = ?

| Name | Type | Description |
| - | - | - |
| fill? | `boolean` | Fill the remaining horizontal space in the stack with this item |

***

## Behavior

* 📱 All children of StackItems are placed in a single view object, which makes recycling the views expensive. Consider keeping your StackItems simple.

| ✅ Do | 🛑 Don't |
| - | - |
| 📱 Keep StackItems shallow. Complex hierarchies have performance penalties | 📱 Use complex and deep Stack layouts |
| Wrap small UI elements in StackItem to group UI elements and styles | Use StackItems outside of Stacks |

***

* [Props](https://shopify.dev/docs/api/product-subscription-extensions/components/stackitem.md#props)
* [Behavior](https://shopify.dev/docs/api/product-subscription-extensions/components/stackitem.md#behavior)