Stack & Cluster
Vertical stacking and horizontal clustering of elements.
Stack
Vertical stack with consistent spacing between children.
gap="xs" Item 1
Item 2
Item 3
gap="sm" Item 1
Item 2
Item 3
gap="md" Item 1
Item 2
Item 3
gap="lg" Item 1
Item 2
Item 3
Stack Alignment
align="start" Start
Aligned
Items
align="center" Center
Aligned
Items
align="end" End
Aligned
Items
Stack Props
| Prop | Type | Default | Description |
|---|---|---|---|
gap | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'md' | Space between items |
align | 'start' | 'center' | 'end' | 'stretch' | 'stretch' | Horizontal alignment |
as | 'div' | 'section' | 'article' | 'ul' | 'ol' | 'div' | HTML element |
Cluster
Horizontal cluster of elements with automatic wrapping.
Default cluster with tags Design Development UX Research Strategy
Cluster with buttons Cluster Justification
justify="start" One Two Three
justify="center" One Two Three
justify="end" One Two Three
justify="between" One Two Three
Cluster Props
| Prop | Type | Default | Description |
|---|---|---|---|
gap | 'xs' | 'sm' | 'md' | 'lg' | 'sm' | Space between items |
justify | 'start' | 'center' | 'end' | 'between' | 'around' | 'start' | Horizontal distribution |
align | 'start' | 'center' | 'end' | 'baseline' | 'center' | Vertical alignment |
wrap | boolean | true | Allow items to wrap |
as | 'div' | 'ul' | 'nav' | 'div' | HTML element |
Practical Examples
Card with Stack & Cluster
Article Title
A brief description of the article content goes here.
Featured 5 min read
Dec 29, 2025