Spacer
Declarative whitespace block bound to `--space-*` tokens. Use when sibling spacing can't come from a parent's `gap`.
Installation
pnpm dlx @hex-core/cli add spacerUsage
import { Spacer } from "@/components/ui/spacer"Vertical breathing room
Push two sections apart inside a parent that doesn't manage gap.
<>
<Hero />
<Spacer size="xl" />
<Features />
</>Horizontal flex spacer
Push siblings to opposite ends of a flex row.
<div className="flex items-center">
<Logo />
<Spacer axis="horizontal" size="lg" />
<Nav />
</div>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
size | "xs" | "sm" | "md" | "lg" | "xl" | md | Spacing token (xs=0.25rem, sm=0.5rem, md=1rem, lg=2rem, xl=4rem). Bound to `--space-*`. |
axis | "vertical" | "horizontal" | "both" | vertical | Which axis to expand. Vertical = height; horizontal = width; both = square. |
AI Guidance
When to use
Use as an explicit whitespace primitive when you can't (or don't want to) use `gap` on the parent — typically: pushing siblings apart inside a flex row that already has gap-0, or inserting one-off vertical breathing room between top-level sections that aren't wrapped in a Stack.
When not to use
Don't use Spacer when a `Stack` or `Cluster` parent's `gap` would do the same thing — that scales better and keeps the spacing concern with the layout primitive. Don't use Spacer to flush content to one edge of a flex container — use `ml-auto` / `justify-between` directly.
Common mistakes
- Using `<Spacer />` between every child in a Stack — just set the Stack's `gap` instead
- Using `axis="both"` and getting a square block where you wanted a line — `both` is rare, usually you want vertical or horizontal
- Setting size="lg" on a horizontal spacer and getting nothing visible because the parent isn't a flex row — Spacer reserves space, it doesn't push siblings on its own
Accessibility
Spacer is `aria-hidden="true"` — screen readers skip it. Don't use a Spacer where a `Separator` would convey meaning (a thematic break should be `Separator`, not `Spacer`).
Token budget: 200