Stack

A layout primitive that establishes vertical rhythm by adding identical margins between nested elements.

With Separators

You can use any component as a separator.

globals.css


:root {
  --ex-stack-gap-y: calc(var(--spacing) * 2);
}

Element	Selector
`Stack`	`.ex-stack`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

A layout primitive that arranges child elements in a strict horizontal row with uniform spacing.

globals.css


:root {
  --ex-hstack-gap-x: calc(var(--spacing) * 2);
}

Element	Selector
`HStack`	`.ex-hstack`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

A layout primitive that strictly chains its layout elements into automated vertical tracks with distinct gap metrics.

globals.css


:root {
  --ex-vstack-gap-y: calc(var(--spacing) * 2);
}

Element	Selector
`VStack`	`.ex-vstack`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`