Spacer

A flexible whitespace element that adds fixed-size gaps or fills available flex space between siblings. Use Spacer for precise spacing control outside of gap-based layouts.

Vertical Size Variants

size="xs" (4px)

Above

Below

<div>
  <PlaceholderBox>Above</PlaceholderBox>
  <Spacer size="xs" />
  <PlaceholderBox>Below</PlaceholderBox>
</div>

size="sm" (8px)

Above

Below

<div>
  <PlaceholderBox>Above</PlaceholderBox>
  <Spacer size="sm" />
  <PlaceholderBox>Below</PlaceholderBox>
</div>

size="md" (16px)

Above

Below

<div>
  <PlaceholderBox>Above</PlaceholderBox>
  <Spacer size="md" />
  <PlaceholderBox>Below</PlaceholderBox>
</div>

size="lg" (24px)

Above

Below

<div>
  <PlaceholderBox>Above</PlaceholderBox>
  <Spacer size="lg" />
  <PlaceholderBox>Below</PlaceholderBox>
</div>

size="xl" (32px)

Above

Below

<div>
  <PlaceholderBox>Above</PlaceholderBox>
  <Spacer size="xl" />
  <PlaceholderBox>Below</PlaceholderBox>
</div>

size="2xl" (48px)

Above

Below

<div>
  <PlaceholderBox>Above</PlaceholderBox>
  <Spacer size="2xl" />
  <PlaceholderBox>Below</PlaceholderBox>
</div>

Flex Spacer

No size — fills available space

Logo

<Cluster gap="sm" className="w-full">
  <div className="px-4 py-2 ...">Logo</div>
  <Spacer />
  <div className="px-4 py-2 ...">Sign In</div>
</Cluster>

Horizontal Spacer

axis="horizontal" — fixed width gap

Left

Right

<Cluster gap="none" wrap={false}>
  <div className="px-4 py-2 ...">Left</div>
  <Spacer size="xl" axis="horizontal" />
  <div className="px-4 py-2 ...">Right</div>
</Cluster>

API Reference

Prop	Type	Default	Description
`size`	`"none" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"`	—	Fixed spacing size. When omitted, the spacer fills available flex space (flex: 1).
`axis`	`"horizontal" \| "vertical"`	`"vertical"`	Whether the fixed spacing is applied as height (vertical) or width (horizontal).
`className`	`string`	—	Additional CSS classes to apply to the spacer element.