Layout
The spatial primitives. Box is the atom — every other layout component is a <Box> wearing a
different name. Reach for the named primitive when it reads more clearly at the call site.
The pieces
| Component | Use it for |
|---|---|
| Box | The styling atom. Any styled, theme-aware container. |
| Stack | A flex container with consistent gap. Column by default. |
| HStack | Stack, horizontal. The most common stack shape. |
| VStack | Stack, vertical. Reads more clearly than Stack with no direction. |
| Container | Establishes a container-query context for @bp responsive keys. |
| Center | Flex container that centres on both axes. |
| Flex | Bare display: flex without Stack's gap conventions. |
| Grid | CSS Grid container with a uniform-column shorthand. |
| Wrap | Flex container with flex-wrap: wrap — tag lists, chip rows. |
| ZStack | Stack along the z-axis. Children share one grid cell. |
| AspectRatio | Wrap a child in a fixed width-to-height ratio. |
| Spacer | Eats the available main-axis space inside a flex container. |
| SafeArea | No-op on web; wraps SafeAreaView on native. |
Why so many
Most of these are sugar over Box. A Center is <Box display="flex" alignItems="center" justifyContent="center">. A Stack is <Box display="flex" gap=…> with a direction prop. The
sugar exists because call sites read more clearly with names — and because compiled output costs
the same either way.
Box is always available when the named primitive does not fit. Skip the named primitive if you
need an unusual layout; the sugar is convention, not constraint.