Animated List

Staggered slide-up + fade-in entrance for list children. Configurable delay between items.

Design system tokens

One-command install

MIT licensed

Zero runtime deps

Code

import { AnimatedList } from "@/components/ui/animated-list"

export default function Example() {
  const items = ["First item", "Second item", "Third item"]
  return (
    <AnimatedList delay={150}>
      {items.map((item) => (
        <div key={item} className="rounded-lg border border-border bg-surface-1 px-4 py-3">
          {item}
        </div>
      ))}
    </AnimatedList>
  )
}

Installation

$npx particleui-cli add animated-list

Usage

TSX

import { AnimatedList } from "@/components/ui/animated-list"

export default function Example() {
  const items = ["First item", "Second item", "Third item"]
  return (
    <AnimatedList delay={150}>
      {items.map((item) => (
        <div key={item} className="rounded-lg border border-border bg-surface-1 px-4 py-3">
          {item}
        </div>
      ))}
    </AnimatedList>
  )
}

Props

Prop	Type	Default	Required
children	React.ReactNode	—	yes
delay	number	`100`	no
className	string	—	no

Details

Source filecomponents/ui/animated-list.tsx

Typeui

Categorieslayout, particles

npm dependencies

Registry deps

Claude skill—