StackItem

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.

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.

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

});

import React from 'react';

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

function App() {

return (

<Text>Fill the space</Text>

</StackItem>

<Text>Other text</Text>

</StackItem>

</InlineStack>

);

}

extend(

'Playground',

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

);

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

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

Anchor to PropsProps

optional = ?

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

Anchor to BehaviorBehavior

📱 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

Was this page helpful?