Components
Stack
Flex layout for arranging children in a row or column with consistent gap spacing.
Stack lays out its children with flexbox along a single axis. Set direction
to 'row' or 'column' (the default), control spacing with the gap scale
(0–8), and align items with align and justify. Pass wrap to let items
flow onto multiple lines, or a divider node to render a separator between each
child. It's the go-to primitive for toolbars, form rows, and vertical content
groups.
Example
Preview
Live
Stack handles direction, alignment, wrapping, and gap tokens.
import { Stack } from '@officina/ui';
<Stack direction="row" gap={2} align="center" justify="between">
<span>Title</span>
<button>Action</button>
</Stack>;API
| Prop | Type | Default | Description |
|---|---|---|---|
| align | enum | stretch | Cross-axis alignment of children. Defaults to `'stretch'`. |
| direction | enum | column | Flex direction of the stack. Defaults to `'column'`. |
| divider | ReactNode | — | Element rendered between each child as a separator. |
| gap | enum | 3 | Spacing scale between children. Defaults to `3`. |
| justify | enum | start | Main-axis distribution of children. Defaults to `'start'`. |
| wrap | boolean | — | Allow children to wrap onto multiple lines. |