The StaggerList component animates its children into view one after another when the list enters the viewport, without requiring any changes to the children themselves.
Add it with the CLI, open it in v0, or copy the source into your project.
Adds the component and installs its dependencies for you.
npx shadcn@latest add https://uibeats.com/r/stagger-list.jsonEverything Stagger List accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
| children (required) | React.ReactNode | No default | Items to stagger; each direct child is wrapped |
| stagger | number | 0.08 | Seconds between each child's entrance |
| delay | number | 0 | Seconds before the first child animates |
| duration | number | 0.5 | Duration of each child's entrance, in seconds |
| distance | number | 24 | Travel distance of the entrance, in pixels |
| direction | 'up' | 'down' | 'left' | 'right' | 'up' | Direction the children travel from |
| once | boolean | true | Animate only the first time the list enters the viewport |
| className | string | '' | Additional CSS classes for the container |
Required.