Layout Primitives
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
gap="sm"
Alpha
Beta
Gamma
gap="md"
Alpha
Beta
Gamma
gap="xl"
Alpha
Beta
Gamma
Wrapping Behavior
Many items wrap naturally
React
TypeScript
Tailwind CSS
Next.js
Base UI
Node.js
PostgreSQL
GraphQL
Docker
Vercel
Figma
Git
wrap={false} — no wrapping
React
TypeScript
Tailwind CSS
Next.js
Base UI
Justify Variations
justify="start"
A
B
C
justify="center"
A
B
C
justify="end"
A
B
C
justify="between"
A
B
C
Align Variations
align="start"
Short
Tall
Medium
align="center"
Short
Tall
Medium
align="end"
Short
Tall
Medium
align="baseline"
Short
Tall
Medium
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
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. |
wrap | boolean | true | Whether items wrap to the next line when they exceed the container width. |
render | ReactElement | — | Render a different element instead of a wrapping div, merging this component's props onto it (e.g. render={<section />}). |
Import
import { Cluster } from "@mikenotthepope/substrateui"