Design systemDraft
Stack
Screens carry layout and copy only, no sizes. Stack is the layout: a column (or a row) whose gap is a step of the space scale.
| Surface | Implementing file | Status |
|---|---|---|
| App | apps/app/ui/components/Stack.tsx (@vyre/ui) | built |
Props
gap 0 to 6 or 8, meaning --s-N (default 3); row; wrap; align start, center, end, stretch; justify start, center, end, between; grow.
Rules
- The gap is a name of a space step, never a number of pixels.
- Children may shrink: the Stack has a minimum width of 0 so long text truncates or wraps instead of pushing the page wide.
- It draws nothing: no fill, border or padding. Use a card for a surface.
Gaps
- None.