Layout primitives
Box, Container, Stack, Grid, and AspectRatio: the escape-hatch and spacing-scale building blocks every other component composes with. Stack's direction prop covers both vertical (default) and horizontal layouts.
Grid
- gap accepts the fixed spacing scale (1,2,3,4,5,6,8,10,12,16), not arbitrary pixels
- columns collapses mobile-first: 3 is one column below sm, two from sm and three from lg. It accepts 1, 2, 3, 4, 6 or 12
Stack direction
direction="vertical" (the default) stacks children top-to-bottom; direction="horizontal" lays them out in a row.
Align and justify
align sets the cross axis - start, center, end, baseline, or stretch (the default). justify spaces a horizontal stack along its row - start, center, end, or between.
- justify and wrap only apply when direction is horizontal
Wrap
wrap lets a horizontal stack flow onto new lines when its children outgrow the row, with the same gap between lines.
Render a different element with as
Stack and Box render a div by default. as swaps the element and keeps the layout, so a stack of items can be a real list.
- Upload a logo
- Invite your team
- Connect a domain
Container width
Container centers page content and caps its line length with width - sm, md, lg (the default), or xl. Its side gutters grow at the sm and lg breakpoints.
- width is a maximum line length, not a control size: sm, md, lg and xl cap at 42, 56, 72 and 80rem
AspectRatio
API reference
The element to render. Use it to keep the layout while fixing the semantics.
Also accepts everything from React.HTMLAttributes<HTMLDivElement>.
Container props
Maximum line length the content is capped at. Not a control size - see the 0.3 upgrade note.
Also accepts everything from React.HTMLAttributes<HTMLDivElement>.
Stack props
Cross-axis alignment of the children.
The element to render. Use it to keep the layout while fixing the semantics.
Flex axis. Default "vertical".
Space between children, on the shared spacing scale.
Only meaningful with `direction="horizontal"`.
Only meaningful with `direction="horizontal"`.
Also accepts everything from React.HTMLAttributes<HTMLDivElement>.
Grid props
Column count, or a breakpoint map for a responsive track count.
Space between cells, on the shared spacing scale.
Also accepts everything from React.HTMLAttributes<HTMLDivElement>.
AspectRatio props
width / height, e.g. 16 / 9. Defaults to 1 (square).
Also accepts everything from React.HTMLAttributes<HTMLDivElement>.
Coding agents read this reference, with its examples, from the version your project has installed, through the Fuji UI MCP server. Set up your agent