Cluster
Lays children out in a horizontal row that wraps to new lines as needed.
Import
import { Cluster } from "@hyzer-labs/ui"Demo
near and away are the density distances: context-aware values that
tighten inside data-density-shift regions.
AlphaBetaGammaDeltaEpsilon
<Cluster gap="none">
<span class="chip">Alpha</span>
<span class="chip">Beta</span>
<span class="chip">Gamma</span>
<span class="chip">Delta</span>
<span class="chip">Epsilon</span>
</Cluster>AlphaBetaGammaDeltaEpsilon
<Cluster gap="xs">
<span class="chip">Alpha</span>
<span class="chip">Beta</span>
<span class="chip">Gamma</span>
<span class="chip">Delta</span>
<span class="chip">Epsilon</span>
</Cluster>AlphaBetaGammaDeltaEpsilon
<Cluster gap="sm">
<span class="chip">Alpha</span>
<span class="chip">Beta</span>
<span class="chip">Gamma</span>
<span class="chip">Delta</span>
<span class="chip">Epsilon</span>
</Cluster>AlphaBetaGammaDeltaEpsilon
<Cluster gap="md">
<span class="chip">Alpha</span>
<span class="chip">Beta</span>
<span class="chip">Gamma</span>
<span class="chip">Delta</span>
<span class="chip">Epsilon</span>
</Cluster>AlphaBetaGammaDeltaEpsilon
<Cluster gap="lg">
<span class="chip">Alpha</span>
<span class="chip">Beta</span>
<span class="chip">Gamma</span>
<span class="chip">Delta</span>
<span class="chip">Epsilon</span>
</Cluster>AlphaBetaGammaDeltaEpsilon
<Cluster gap="near">
<span class="chip">Alpha</span>
<span class="chip">Beta</span>
<span class="chip">Gamma</span>
<span class="chip">Delta</span>
<span class="chip">Epsilon</span>
</Cluster>AlphaBetaGammaDeltaEpsilon
<Cluster gap="away">
<span class="chip">Alpha</span>
<span class="chip">Beta</span>
<span class="chip">Gamma</span>
<span class="chip">Delta</span>
<span class="chip">Epsilon</span>
</Cluster>justify distributes the row's leftover inline space. between pushes the first and last children to the edges.
One Two Three
<Cluster justify="start">
<span class="chip">One</span>
<span class="chip">Two</span>
<span class="chip">Three</span>
</Cluster>One Two Three
<Cluster justify="center">
<span class="chip">One</span>
<span class="chip">Two</span>
<span class="chip">Three</span>
</Cluster>One Two Three
<Cluster justify="end">
<span class="chip">One</span>
<span class="chip">Two</span>
<span class="chip">Three</span>
</Cluster>One Two Three
<Cluster justify="between">
<span class="chip">One</span>
<span class="chip">Two</span>
<span class="chip">Three</span>
</Cluster>One Two Three
<Cluster justify="around">
<span class="chip">One</span>
<span class="chip">Two</span>
<span class="chip">Three</span>
</Cluster>align positions children of different heights on the cross axis. baseline lines up their text baselines regardless of box size.
small large type tall box
<Cluster align="start">
<span class="chip">small</span>
<span class="chip chip--lg">large type</span>
<span class="chip chip--tall">tall box</span>
</Cluster>small large type tall box
<Cluster align="center">
<span class="chip">small</span>
<span class="chip chip--lg">large type</span>
<span class="chip chip--tall">tall box</span>
</Cluster>small large type tall box
<Cluster align="end">
<span class="chip">small</span>
<span class="chip chip--lg">large type</span>
<span class="chip chip--tall">tall box</span>
</Cluster>small large type tall box
<Cluster align="stretch">
<span class="chip">small</span>
<span class="chip chip--lg">large type</span>
<span class="chip chip--tall">tall box</span>
</Cluster>small large type tall box
<Cluster align="baseline">
<span class="chip">small</span>
<span class="chip chip--lg">large type</span>
<span class="chip chip--tall">tall box</span>
</Cluster>The tinted zone is the Cluster; the space between its edge and the chips is the padding. padding applies on both axes; paddingInline / paddingBlock override one axis and win where set. The axis names are the
CSS logical properties, so they stay correct in RTL and vertical writing modes. See Spacing & Sizing.
padding="none" Two Three
paddingInline="none" Two Three
paddingBlock="none" Two Three
<Cluster padding="none">…</Cluster>
<Cluster paddingInline="none">…</Cluster>
<Cluster paddingBlock="none">…</Cluster>padding="sm" Two Three
paddingInline="sm" Two Three
paddingBlock="sm" Two Three
<Cluster padding="sm">…</Cluster>
<Cluster paddingInline="sm">…</Cluster>
<Cluster paddingBlock="sm">…</Cluster>padding="md" Two Three
paddingInline="md" Two Three
paddingBlock="md" Two Three
<Cluster padding="md">…</Cluster>
<Cluster paddingInline="md">…</Cluster>
<Cluster paddingBlock="md">…</Cluster>padding="lg" Two Three
paddingInline="lg" Two Three
paddingBlock="lg" Two Three
<Cluster padding="lg">…</Cluster>
<Cluster paddingInline="lg">…</Cluster>
<Cluster paddingBlock="lg">…</Cluster>padding="near" Two Three
paddingInline="near" Two Three
paddingBlock="near" Two Three
<Cluster padding="near">…</Cluster>
<Cluster paddingInline="near">…</Cluster>
<Cluster paddingBlock="near">…</Cluster>padding="away" Two Three
paddingInline="away" Two Three
paddingBlock="away" Two Three
<Cluster padding="away">…</Cluster>
<Cluster paddingInline="away">…</Cluster>
<Cluster paddingBlock="away">…</Cluster>The default wraps onto new lines as space runs out. wrap={false} keeps a
single line. The second demo sits in a scrollable wrapper, so the overflow is reachable.
wrap (default)
AlphaBetaGammaDeltaEpsilonZetaEtaThetaIotaKappaLambdaOmicronSigmaUpsilonOmegaEpsilon II
wrap={false}
AlphaBetaGammaDeltaEpsilonZetaEtaThetaIotaKappaLambdaOmicronSigmaUpsilonOmegaEpsilon II
<Cluster>…sixteen chips…</Cluster>
<!-- nowrap keeps one line; pair with overflow-x on a wrapper to scroll -->
<Cluster wrap={false}>…sixteen chips…</Cluster>Props
| Name | Type | Default | Note |
|---|---|---|---|
gap | 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'near' | 'away' | 'sm' | near/away are the density distances — they tighten inside data-density-shift regions. |
justify | 'start' | 'center' | 'end' | 'between' | 'around' | 'start' | |
align | 'start' | 'center' | 'end' | 'stretch' | 'baseline' | 'center' | Shared LayoutAlign scale (Stack/Cluster/Grid). |
wrap | boolean | true | |
padding | 'none' | 'sm' | 'md' | 'lg' | 'near' | 'away' | 'none' | Both axes. Shared LayoutPadding scale — near/away tighten inside data-density-shift regions. |
paddingInline | 'none' | 'sm' | 'md' | 'lg' | 'near' | 'away' | — | Per-axis override — wins over padding on the inline axis. Same LayoutPadding scale. |
paddingBlock | 'none' | 'sm' | 'md' | 'lg' | 'near' | 'away' | — | Per-axis override — wins over padding on the block axis. Same LayoutPadding scale. |
as | string | 'div' | |
class | string | — | Merged after the hz-cluster class. |
children | Snippet | — |
Theme hooks
What this component promises your CSS. The reference theme styles exactly these — from @layer hz-theme, so your unlayered rules win. See Styling Components for the how.
Root class: .hz-cluster
Data attributes
| Hook | Values | Styles |
|---|---|---|
data-gap | 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'near' | 'away' | Gap between items. Default sm. |
data-justify | 'start' | 'center' | 'end' | 'between' | 'around' | justify-content. Default start. |
data-align | 'start' | 'center' | 'end' | 'stretch' | 'baseline' | align-items. Default center. |
data-wrap | present when wrapping | Present by default; its absence is styled too (:not([data-wrap]) sets nowrap). |
data-padding | 'none' | 'sm' | 'md' | 'lg' | 'near' | 'away' | Padding on both axes. Default none. |
Accessibility
Cluster is a layout primitive with no ARIA semantics. Reading and focus order follow DOM order.