Primitive · CLI
Stagger
Staggered children reveal. Preview plays on mount — use Replay to watch again.
Preview
npx shadcn@latest add @atroui/staggerFirst
Second
Third
Installation
Agent blurb — install command + no npm UI rule. For agents
npx shadcn@latest add @atroui/staggerSource lands in your repo. Installation · Registry
Usage
Wrap a list in Stagger and each item in StaggerChild. stagger / delay are seconds. Pass preview in docs canvases. Reduced motion renders a plain div with no animation.
tsx
import { Stagger, StaggerChild } from "@/components/motion/stagger"
<Stagger>
<StaggerChild>One</StaggerChild>
<StaggerChild>Two</StaggerChild>
</Stagger>
{/* Docs preview (skips IntersectionObserver) */}
<Stagger preview>
<StaggerChild>One</StaggerChild>
</Stagger>Slower cascade
Raise stagger for a deliberate beat between children; delay holds the whole group before the first child moves. StaggerChild y controls how far each row climbs.
Hold
Then
Cascade
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| stagger | number | 0.08 | Seconds between each child. |
| delay | number | 0 | Seconds before the first child animates. |
| once | boolean | true | If true, only animate the first time in view. |
| preview | boolean | false | Animate on mount (docs stages) instead of waiting for scroll. |
| StaggerChild y | number | 14 | Initial translateY per child in px. |
Stagger