Stagger
Stagger reveals child elements one after another, separated by a short delay.
When visible turns on, Stagger sets visible on each child in turn; when it turns off, the children hide in reverse order. Fade/Scale/Slide/Blur/Rotate/Collapse children are controlled directly; other elements are wrapped in a Fade automatically. Stagger renders a fragment, so place it inside a layout element (flex, grid).
Design tokens
Build components
Write docs
Test RTL
Release
Import
Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.
TSX
// npm install yugen-uiimport { Stagger } from "yugen-ui";Variants
Each tile is a standalone example: hover to copy, or press Code to see the source.
桜
幽
玄
和
風
With Slide
The children are presence components, so they keep their own motion; itemDelay="fast".
appear with Scale
A grid of tiles scales in one by one as soon as it mounts.
Usage
Do
- Use it for short lists (≤ 10 items) to give rhythm when content appears.
- Keep itemDelay short (faster/fast).
Don't
- Don't stagger long lists or data that updates constantly.
- Don't make people wait for the animation to finish before they can interact.
Props
| Prop · Type | Default | Description |
|---|---|---|
| visibleboolean | Default: — | Shows or hides the whole group. |
| itemDelay"faster" | "fast" | "normal" | "gentle" | "slow" | Default: "faster" | Delay between two items (--duration* tokens). |
| appearboolean | Default: false | Runs the sequence on the first mount. |
| unmountOnExitboolean | Default: false | Passed to each child (unless the child sets its own). |
| childrenReactNode | Default: — | Presence components or plain elements (wrapped in Fade). |