Primitive

Cluster

Wrapping inline group for chips, tags, actions, filters, and token sets.

Use Cluster when horizontal children may wrap. Keep it for grouping, not for bespoke spacing overrides.
layout
DOM renderImage render
ClusterDefault
ProductEditorialGenerativeEducational

Playground

Controls update query params directly, so every primitive state can be linked, rendered, and screenshotted deterministically.

Loading playground

Rendered matrix

Every state maps to the same primitive render route through the state query param.

Default

Wrapping token group.
ProductEditorialGenerativeEducational
Render state

Actions

Wrapping action cluster.
Render state

Between

Wrapped group with edge distribution.
Ready12 traces2 failed
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
density'compact' | 'comfortable' | 'editorial'-Wrap and row-gap density.
align'start' | 'center' | 'end' | 'stretch'-Cross-axis alignment.
justify'start' | 'center' | 'end' | 'between'-Main-axis distribution.
childrenReactNode-Cluster content.