Cluster

A horizontal flex layout component that distributes children along the inline axis with configurable gap, alignment, justification, and wrapping. Use Cluster to compose inline groups like tag lists, button rows, and navigation items.

Gap Variants

gap="xs"
Alpha
Beta
Gamma
<Cluster gap="xs">
  <Tag>Alpha</Tag>
  <Tag>Beta</Tag>
  <Tag>Gamma</Tag>
</Cluster>
gap="sm"
Alpha
Beta
Gamma
<Cluster gap="sm">
  <Tag>Alpha</Tag>
  <Tag>Beta</Tag>
  <Tag>Gamma</Tag>
</Cluster>
gap="md"
Alpha
Beta
Gamma
<Cluster gap="md">
  <Tag>Alpha</Tag>
  <Tag>Beta</Tag>
  <Tag>Gamma</Tag>
</Cluster>
gap="xl"
Alpha
Beta
Gamma
<Cluster gap="xl">
  <Tag>Alpha</Tag>
  <Tag>Beta</Tag>
  <Tag>Gamma</Tag>
</Cluster>

Wrapping Behavior

Many items wrap naturally
React
TypeScript
Tailwind CSS
Next.js
Radix UI
Node.js
PostgreSQL
GraphQL
Docker
Vercel
Figma
Git
<Cluster gap="sm">
  <Tag>React</Tag>
  <Tag>TypeScript</Tag>
  <Tag>Tailwind CSS</Tag>
  <Tag>Next.js</Tag>
  <Tag>Radix UI</Tag>
  <Tag>Node.js</Tag>
  <Tag>PostgreSQL</Tag>
  <Tag>GraphQL</Tag>
  <Tag>Docker</Tag>
  <Tag>Vercel</Tag>
  <Tag>Figma</Tag>
  <Tag>Git</Tag>
</Cluster>
wrap={false} — no wrapping
React
TypeScript
Tailwind CSS
Next.js
Radix UI
<Cluster gap="sm" wrap={false}>
  <Tag>React</Tag>
  <Tag>TypeScript</Tag>
  <Tag>Tailwind CSS</Tag>
  <Tag>Next.js</Tag>
  <Tag>Radix UI</Tag>
</Cluster>

Justify Variations

justify="start"
A
B
C
<Cluster justify="start">
  <Tag>A</Tag>
  <Tag>B</Tag>
  <Tag>C</Tag>
</Cluster>
justify="center"
A
B
C
<Cluster justify="center">
  <Tag>A</Tag>
  <Tag>B</Tag>
  <Tag>C</Tag>
</Cluster>
justify="end"
A
B
C
<Cluster justify="end">
  <Tag>A</Tag>
  <Tag>B</Tag>
  <Tag>C</Tag>
</Cluster>
justify="between"
A
B
C
<Cluster justify="between">
  <Tag>A</Tag>
  <Tag>B</Tag>
  <Tag>C</Tag>
</Cluster>

Align Variations

align="start"
Short
Tall
Medium
<Cluster align="start">
  <div className="h-8 ...">Short</div>
  <div className="h-16 ...">Tall</div>
  <div className="h-12 ...">Medium</div>
</Cluster>
align="center"
Short
Tall
Medium
<Cluster align="center">
  <div className="h-8 ...">Short</div>
  <div className="h-16 ...">Tall</div>
  <div className="h-12 ...">Medium</div>
</Cluster>
align="end"
Short
Tall
Medium
<Cluster align="end">
  <div className="h-8 ...">Short</div>
  <div className="h-16 ...">Tall</div>
  <div className="h-12 ...">Medium</div>
</Cluster>
align="baseline"
Short
Tall
Medium
<Cluster align="baseline">
  <div className="h-8 ...">Short</div>
  <div className="h-16 ...">Tall</div>
  <div className="h-12 ...">Medium</div>
</Cluster>

API Reference

PropTypeDefaultDescription
gap"none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl""sm"Controls the horizontal spacing between child elements.
align"start" | "center" | "end" | "baseline""center"Cross-axis alignment of children within the cluster.
justify"start" | "center" | "end" | "between""start"Main-axis justification of children along the row.
wrapbooleantrueWhether items wrap to the next line when they exceed the container width.
asChildbooleanfalseWhen true, merges props onto the child element via Radix Slot instead of rendering a wrapping div.