# Stack

A container for other components that allows them to be stacked horizontally or vertically. When building complex UIs, this will be your primary building block. Stacks always wrap the content to the next column or row.

```tsx
import {
  reactExtension,
  Button,
  Stack,
  Screen,
} from '@shopify/ui-extensions-react/point-of-sale';
import React from 'react';

export default reactExtension('pos.home.modal.render', () => (
  <Screen name="Stack" title="Stack">
    <Stack direction="inline" gap="200">
      <Button title="Hello" />
      <Button title="Hello" />
    </Stack>
  </Screen>
));

```

```ts
import {
  extension,
  Button,
  Screen,
  Stack,
} from '@shopify/ui-extensions/point-of-sale';

export default extension('pos.home.modal.render', (root) => {
  const button1 = root.createComponent(Button, {
    title: 'Hello',
  });

  const button2 = root.createComponent(Button, {
    title: 'Hello',
  });

  const stack = root.createComponent(Stack, {
    direction: 'inline',
    gap: '200',
  });
  stack.append(button1, button2);

  const screen = root.createComponent(Screen, {
    name: 'Stack',
    title: 'Stack',
  });
  screen.append(stack);
  root.append(screen);

  root.mount();
});

```

## Stack

### StackProps

### alignContent

value: `'stretch' | ContentPosition | ContentDistribution`

Aligns the Stack along the cross axis.

### alignItems

value: `'stretch' | 'baseline' | ContentPosition`

Aligns the Stack's children along the cross axis.

### alignment

value: `ContentPosition | ContentDistribution`

The alignment of the children along the main axis.

### blockSize

value: `SizeUnitsOrAuto`

Adjust the block size.

Auto takes the block size of the box's children.

### columnGap

value: `SpacingKeyword | ''`

Adjust spacing between elements in the inline axis.

This overrides the column value of `gap`.

### direction

value: `'inline' | 'block' | DeprecatedStackDirection`

Sets how the Stack's children are placed within the Stack. 'vertical' and 'horizontal' are deprecated. Using these values will use the Stack implementation from 2024-10.

### flex

value: `number`

The flex value for the stack. Flex 1 will stretch the stack to fill the parent.

### flexChildren

value: `boolean`

Whether the children should be stretched to fill the cross axis.

### flexWrap

value: `'wrap' | 'nowrap' | 'wrap-reverse'`

Wrap behavior for the children of the stack.

### gap

value: `SpacingKeyword`

The size of the gap between each child in the stack.

### inlineSize

value: `SizeUnitsOrAuto`

Adjust the inline size.

Auto takes the inline size of the box's children.

### justifyContent

value: `ContentPosition | ContentDistribution`

Aligns the Stack along the main axis.

### maxBlockSize

value: `SizeUnitsOrNone`

Adjust the maximum block size.

### maxInlineSize

value: `SizeUnitsOrNone`

Adjust the maximum inline size.

### minBlockSize

value: `SizeUnits`

Adjust the minimum block size.

### minInlineSize

value: `SizeUnits`

Adjust the minimum inline size.

### padding

value: `PaddingKeys`

Adjust the padding of all edges in pixels.

### paddingBlock

value: `PaddingKeys`

Adjust the block-padding.

This overrides the block value of `padding`.

### paddingBlockEnd

value: `PaddingKeys`

Adjust the block-end padding.

This overrides the block-end value of `paddingBlock`.

### paddingBlockStart

value: `PaddingKeys`

Adjust the block-start padding.

This overrides the block-start value of `paddingBlock`.

### paddingHorizontal

value: `HorizontalSpacing`

The horizontal padding around the stack.

### paddingInline

value: `PaddingKeys`

Adjust the inline padding.


This overrides the inline value of `padding`.

### paddingInlineEnd

value: `PaddingKeys`

Adjust the inline-end padding.

This overrides the inline-end value of `paddingInline`.

### paddingInlineStart

value: `PaddingKeys`

Adjust the inline-start padding.

This overrides the inline-start value of `paddingInline`.

### paddingVertical

value: `VerticalSpacing`

The vertical padding around the stack.

### rowGap

value: `SpacingKeyword | ''`

Adjust spacing between elements in the block axis.

This overrides the row value of `gap`.

### spacing

value: `Spacing`

The spacing between each child in the stack.