Playground
Stack
layout
Consistent spacing between elements with flexbox
Replace raw flexbox divs with semantic spacing control
import { Stack } from "@everydayos/ui";Usage
Vertical stacking of content with consistent spacing
Stack spacing
Use nested stacks to control hierarchy without wrapper components.
This group uses spacing="md".
Consistent gaps make layouts feel designed, not incidental.
API
directionverticalverticalhorizontal
spacingmdnonexssmmdlgxl
defaultpreferredrare
alignstretchstartcenterendstretchbaseline
justifystartstartcenterendbetweenaroundevenly
| Prop | Type | Default |
|---|---|---|
className | string | — |
children* | React.ReactNode | — |
Composition
Pairs well with
Heading
Text
Button
Surface
When to avoid
- Need wrapping behavior — use Inline instead
- Need grid layout — use Grid instead