GitHub

Layout primitives

Every spacing decision lives here. Components never carry outer margin. Each primitive below shows its key props as labeled rows.

No className at usage site

Stack

Vertical flex column with token-driven gap. Every gap step plus align options.

gap xs
One
Two
Three
gap sm
One
Two
Three
gap md
One
Two
Three
gap lg
One
Two
Three
gap xl
One
Two
Three
align start
Short
A longer box
align center
Short
A longer box
align end
Short
A longer box
tsx
<Stack gap="md">…</Stack>

HStack

Horizontal flex row. Default alignment is center. Every justify + align option, plus wrap.

justify start
A
B
C
justify center
A
B
C
justify end
A
B
C
justify between
A
B
C
justify around
A
B
C
justify evenly
A
B
C
align start
A
Tall
C
align center
A
Tall
C
align end
A
Tall
C
align stretch
A
Tall
C
align baseline
A
Tall
C
wrap
one
two
three
four
five
tsx
<HStack gap="md" justify="between">…</HStack>

VStack

Explicit vertical stack — identical to Stack. Gap and align rows.

gap xs
Line 1
Line 2
Line 3
gap sm
Line 1
Line 2
Line 3
gap md
Line 1
Line 2
Line 3
gap lg
Line 1
Line 2
Line 3
gap xl
Line 1
Line 2
Line 3
tsx
<VStack gap="sm" align="start">…</VStack>

Cluster

Wrapping inline row for tag lists and chip clusters. Gap and justify options.

gap xs
react
typescript
tailwind
postgres
edge
docker
gap sm
react
typescript
tailwind
postgres
edge
docker
gap md
react
typescript
tailwind
postgres
edge
docker
justify between
left
middle
right
tsx
<Cluster gap="sm">…</Cluster>

Grid

CSS grid with responsive column support. Fixed columns, responsive columns, and gap.

columns 2
Cell 1
Cell 2
Cell 3
Cell 4
columns 3
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
columns 4
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
Cell 7
Cell 8
responsive
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
Cell 7
Cell 8
tsx
<Grid columns={{ base: 1, md: 2, lg: 3 }} gap="md">…</Grid>

Container

Max-width wrapper with responsive padding. Every size step.

size sm
Container size sm
size md
Container size md
size lg
Container size lg
size xl
Container size xl
size prose
Container size prose
size full
Container size full
tsx
<Container size="lg">…</Container>

Section

Semantic section with vertical rhythm and optional surface. Padding + background rows.

paddingY sm

paddingY sm

paddingY md

paddingY md

paddingY lg

paddingY lg

bg default

default surface

bg subtle

subtle surface

bg inverse

inverse surface

tsx
<Section paddingY="lg" background="subtle">…</Section>

Spacer

Flex filler or fixed-size inert spacer. As a flex filler and at fixed sizes.

flex fill
Logo
Sign in
size sm
A
B
size md
A
B
size lg
A
B
tsx
<HStack><Logo /><Spacer /><Button>…</Button></HStack>

Center

Centers children on one or both axes.

both
Centered content
horizontal
Horizontally centered
tsx
<Center minHeight="6rem">…</Center>

Split

Two-column responsive layout that collapses below a breakpoint. Every left-width ratio.

leftWidth 1/2
Aside (1/2)
Article
leftWidth 1/3
Aside (1/3)
Article
leftWidth 2/3
Aside (2/3)
Article
leftWidth 1/4
Aside (1/4)
Article
leftWidth 3/4
Aside (3/4)
Article
tsx
<Split leftWidth="1/3" breakAt="md">…</Split>

Divider

Separator used between layout regions. All tones, a label, and vertical orientation.

tone
label
vertical

Left

Right

tsx
<Divider label="OR" />