Layout

Four primitives handle all layout spacing. They only accept steps from the spacing scale, so pages stay consistent.

Component	Direction	Default gap	Use for
Stack	vertical	4	sections, forms, lists
Inline	horizontal	2	button rows, tags, toolbars
Grid	columns	4	card grids, multi-column layouts
Container	none	none	page width and side padding

Spacing scale: 1 | 2 | 3 | 4 | 6 | 8 | 12 (4 = 1rem).

Import

import { Stack, Inline, Grid, Container } from "@/components/ui/layout"

Page layout

<Container size="md">
  <Stack gap={8}>
    <Stack gap={2}>
      <h1 className="font-heading text-3xl font-bold">Settings</h1>
      <p className="text-muted-foreground">Manage your account.</p>
    </Stack>
    <Grid columns={{ base: 1, md: 2 }} gap={6}>
      <Card>...</Card>
      <Card>...</Card>
    </Grid>
    <Inline gap={2} justify="end">
      <Button variant="outline">Cancel</Button>
      <Button>Save</Button>
    </Inline>
  </Stack>
</Container>

Semantic elements

Use asChild to render a different element:

<Stack asChild gap={2}>
  <ul>
    <li>One</li>
    <li>Two</li>
  </ul>
</Stack>

Props

• Stack: gap, align (start | center | end | stretch | baseline), justify (start | center | end | between), asChild
• Inline: same as Stack, plus wrap (default true). align defaults to center.
• Grid: columns (1 | 2 | 3 | 4 | 6 | 12, or { base, sm, md, lg, xl }), gap, asChild
• Container: size (sm | md | lg | xl | full, default lg), asChild