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

Resizable

Draggable split panels — drag the handle to resize, keyboard-operable via arrow keys. Wraps react-resizable-panels with DS tokens.

horizontal

Main content

vertical

Preview

Console

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

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

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

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

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

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

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

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

Center

Centers children on one or both axes.

both
Centered content
horizontal
Horizontally centered

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

Divider

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

tone
label
vertical

Left

Right