Layout

Stack

Vertical flex-column primitive that spaces children with a gap from the shared token scale.

Install

npx shadcn@latest add @alix/stack

Preview

Usage

<Stack gap="md">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</Stack>

Examples

The gap scale

One prop steps the vertical rhythm across the whole system — tight for dense metadata, airy for section breaks.

gap="xs"

gap="md"

gap="xl"

{(["xs", "md", "xl"] as const).map((gap) => (
  <Stack key={gap} gap={gap}>
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </Stack>
))}

Alignment also sets text

align moves items on the cross axis and the text with them, so a centered stack reads centered end to end.

align="start"

Practice note

align="center"

Practice note

<Stack gap="sm" align="start">
  <div>align="start"</div>
  <div>Practice note</div>
</Stack>
<Stack gap="sm" align="center">
  <div>align="center"</div>
  <div>Practice note</div>
</Stack>

A content column

The everyday job: a titled block of reading text with an action beneath, spaced on one token.

Turnaround and restructuring

Move from liquidity pressure to a credible, senior-led plan — with the operating decisions made in the first weeks, not the first quarter.

<Stack gap="sm">
  <Text variant="headingSm">Turnaround and restructuring</Text>
  <Text variant="body">
    Move from liquidity pressure to a credible, senior-led plan — with
    the operating decisions made in the first weeks, not the first quarter.
  </Text>
  <Button variant="outline" className="self-start">Read the approach</Button>
</Stack>

When to use it

Use it for

Any vertical run of elements spaced on one token — a titled text block, a form column, a list of cards.
Content columns where the alignment should carry to the text too (a centered empty state, a centered CTA block).
As a semantic list or section via render, keeping the flex-column layout but emitting the right tag.

Reach for something else

Horizontal rows — use Inline, which owns row gap, wrap, and main-axis distribution.
Equal-width responsive columns — use Grid, which collapses to one column on small screens.
Reaching for a raw flex flex-col gap-* div — Stack encodes the shared gap scale so the rhythm stays consistent.

Props

Prop	Type	Default	Description
gap	"none" \| "xxs" \| "xs" \| "sm" \| "md" \| "lg" \| "xl"	"md"	Vertical space between children, from the shared gap scale.
align	"start" \| "center" \| "end" \| "stretch"	"stretch"	Cross-axis item alignment. Also sets text alignment, so align="center" centers text too.
render	ReactElement \| ((props, state) => ReactElement)	—	Swaps the rendered element for a semantic tag (e.g. <section>, <ul>) while keeping the layout.