Layout primitives

Every spacing decision lives here. Components never carry outer margin.

No className at usage site

Stack

Vertical flex column with token-driven gap.

Heading

Body

CTA

tsx

<Stack gap="md">…</Stack>

HStack

Horizontal flex row. Default alignment is center.

Title

Filter

Create

tsx

<HStack gap="md" justify="between">…</HStack>

VStack

Explicit vertical stack — identical to Stack.

Line 1

Line 2

Line 3

tsx

<VStack gap="sm">…</VStack>

Cluster

Wrapping inline row. Use for tag lists, chip clusters.

react

typescript

tailwind

postgres

edge

mqtt

docker

vercel

railway

tsx

<Cluster gap="sm">…</Cluster>

Grid

CSS grid with responsive column support.

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.

Container max-width md (48rem / 768px)

tsx

<Container size="lg">…</Container>

Section

Semantic section with vertical rhythm and optional surface.

Section with subtle background + md padding.

tsx

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

Spacer

Flex filler or fixed-size inert spacer.

Logo

tsx

<HStack><Logo /><Spacer /><Button>…</Button></HStack>

Center

Centers children on one or both axes.

Centered content

tsx

<Center minHeight="6rem">…</Center>

Split

Two-column responsive layout that collapses below a breakpoint.

Aside (1/3)

Article (2/3)

tsx

<Split leftWidth="1/3">…</Split>