Stack
Vertical rhythm: children in a column, separated by one gap from the scale.
import Stack from '@/components/ui/Stack';Source: src/components/ui/Stack.tsx
Examples
The gap scale
xs 5 / sm 10 / md 20 / lg 40. The same four values everywhere, which is what keeps two unrelated pages looking like the same product.
gap="xs"
gap="sm"
gap="md"
gap="lg"
Alignment
stretch by default, which is what a form wants — every field the same width. center for a hero, start for a list of chips.
stretch
start
center
end
As a list
`as` changes the element without changing the layout — a Stack of list items should be a real <ul>, or a screen reader announces nothing about how many there are.
- First item
- Second item
Props
<Stack> props
| Prop | Type | Default | Description |
|---|---|---|---|
as | ElementType | 'div' | — |
gap | 'xs' | 'sm' | 'md' | 'lg' | 'md' | Vertical space between children. Defaults to the 20px gutter. |
align | 'start' | 'center' | 'end' | 'stretch' | 'stretch' | — |
childrenrequired | ReactNode | — | — |
Also accepts everything in HTMLAttributes<HTMLElement> — so native attributes (id, onClick, aria-*, data-*) pass straight through.
Usage
Do
- Reach for it before writing `flex flex-col gap-*` by hand.
Don’t
- Don’t mix it with margins on the children — pick one spacing mechanism.