Stack

A vertical flex layout component that distributes children along the block axis with configurable gap and alignment. Use Stack to compose consistent vertical spacing throughout your interface.

Gap Variants

gap="sm"

Item 1

Item 2

Item 3

<Stack gap="sm">
  <PlaceholderBox>Item 1</PlaceholderBox>
  <PlaceholderBox>Item 2</PlaceholderBox>
  <PlaceholderBox>Item 3</PlaceholderBox>
</Stack>

gap="md"

Item 1

Item 2

Item 3

<Stack gap="md">
  <PlaceholderBox>Item 1</PlaceholderBox>
  <PlaceholderBox>Item 2</PlaceholderBox>
  <PlaceholderBox>Item 3</PlaceholderBox>
</Stack>

gap="lg"

Item 1

Item 2

Item 3

<Stack gap="lg">
  <PlaceholderBox>Item 1</PlaceholderBox>
  <PlaceholderBox>Item 2</PlaceholderBox>
  <PlaceholderBox>Item 3</PlaceholderBox>
</Stack>

gap="xl"

Item 1

Item 2

Item 3

<Stack gap="xl">
  <PlaceholderBox>Item 1</PlaceholderBox>
  <PlaceholderBox>Item 2</PlaceholderBox>
  <PlaceholderBox>Item 3</PlaceholderBox>
</Stack>

Alignment

align="start"

Start

Aligned

Items

<Stack align="start">
  <div className="w-24 ...">Start</div>
  <div className="w-32 ...">Aligned</div>
  <div className="w-20 ...">Items</div>
</Stack>

align="center"

Center

Aligned

Items

<Stack align="center">
  <div className="w-24 ...">Center</div>
  <div className="w-32 ...">Aligned</div>
  <div className="w-20 ...">Items</div>
</Stack>

align="end"

End

Aligned

Items

<Stack align="end">
  <div className="w-24 ...">End</div>
  <div className="w-32 ...">Aligned</div>
  <div className="w-20 ...">Items</div>
</Stack>

align="stretch"

Stretch

Full Width

Items

<Stack align="stretch">
  <PlaceholderBox>Stretch</PlaceholderBox>
  <PlaceholderBox>Full Width</PlaceholderBox>
  <PlaceholderBox>Items</PlaceholderBox>
</Stack>

Nested Stacks

Outer Item

Nested Item 1

Nested Item 2

Nested Item 3

Outer Item

<Stack gap="lg">
  <PlaceholderBox>Outer Item</PlaceholderBox>
  <Stack gap="sm" className="pl-6 border-l-2 border-border">
    <PlaceholderBox>Nested Item 1</PlaceholderBox>
    <PlaceholderBox>Nested Item 2</PlaceholderBox>
    <PlaceholderBox>Nested Item 3</PlaceholderBox>
  </Stack>
  <PlaceholderBox>Outer Item</PlaceholderBox>
</Stack>

API Reference

Prop	Type	Default	Description
`gap`	`"none" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"`	`"md"`	Controls the vertical spacing between child elements.
`align`	`"start" \| "center" \| "end" \| "stretch"`	`"stretch"`	Cross-axis alignment of children within the stack.
`asChild`	`boolean`	`false`	When true, merges props onto the child element via Radix Slot instead of rendering a wrapping div.