Stack
Overlaps children in a CSS grid stack with a configurable offset to create a card-pile effect
Category: layout · WCAG 2.2-AA · stack, pile, overlap, layered, z-axis, card-pile, layout
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | Content rendered inside the component. |
offset | number | 4 | Pixel offset applied per overlapped layer in both axes. This is NOT a spacing `gap` — for gap-based vertical/horizontal layout use `Flex`/`Grid` and their `gap` prop. |
className | string | — | Additional CSS class names merged onto the root element. |
When to use
- Card pile UI where depth and layering should be visible
- Overlapping avatar groups
- Notification stack visualisations
When not to use
- Gap-based vertical/horizontal layout — that is a DIFFERENT component, `Flex` (`layout/flex`). This `Stack` only overlaps children with an offset.
- Independent positioned elements — use CSS position directly
How to build an accessible Stack in React →
Examples
Card pile
Three cards stacked with a 6px offset to show depth
<Stack offset={6}><Card>First</Card><Card>Second</Card><Card>Third</Card></Stack>Tight stack
Overlapping avatar group with minimal offset
<Stack offset={2}><Avatar src="/a.jpg" /><Avatar src="/b.jpg" /><Avatar src="/c.jpg" /></Stack>Related components
- layout/flex — The flex layout primitive `Flex`, for gap-based vertical/horizontal stacking — a different component from this card-pile Stack.
- Avatar — Overlapping avatar groups are a primary use case for Stack
- Card — Card pile visualisations are a common Stack pattern