Stack
LayoutA vertical flex column with consistent spacing.
Stack lays children out vertically with a uniform gap and optional alignment or justification controls.
npx shadcn@latest add stackDefault
Preview
LiveFirst
Second
Third
tsx
1<Stack gap={4}>2 <Placeholder>First</Placeholder>3 <Placeholder>Second</Placeholder>4</Stack>
Alignment
Align items along the cross axis with the align prop.
Preview
LiveA
B
C
tsx
1<Stack gap={3} align="center">2 <Placeholder className="w-24">A</Placeholder>3 <Placeholder className="w-40">B</Placeholder>4</Stack>
API reference
All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.
| Prop | Type | Description |
|---|---|---|
| gap | "1" | "2" | "3" | "4" | "6" | "8"= "4" | Spacing between items. |
| align | "start" | "center" | "end" | "stretch" | Cross-axis alignment. |
| justify | "start" | "center" | "end" | "between" | Main-axis justification. |