FX · Interactions

List items that fade up one after another as the list scrolls into view.

  • Design tokens
  • Motion presets
  • Accessible defaults
  • Copy-paste source
  • Agent-ready registry
bash
npx shadcn@latest add https://www.rad-ui.com/r/stagger-list.json
React
import StaggerList from "@/components/fx/stagger-list"

<StaggerList>
    {items.map((item) => <li key={item.id}>{item.name}</li>)}
</StaggerList>
  • List semantics, order and content are untouched; only opacity and position animate.
  • Focus moving into the list reveals every item at once.
  • prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) shows the list from the first paint.
PropTypeDefaultDescription
children
ReactNode
—

List items, usually <li>.

as
'ul' | 'ol' | 'div'
'ul'

List element.

stagger
number
70

Milliseconds between items.

duration
number
500

Milliseconds per item.

Edit this page on GitHub →