Skip to main content
  • Location: sabo/src/components/ui/animated-list.tsx

​
When to use

  • Introduce list items with a subtle entrance motion.
  • Works well for feature lists, steps, or notifications.

​
Usage

sabo/src/components/ui/animated-list.tsx
"use client";
import { AnimatedList } from "@/components/ui/animated-list";

export function Example() {
  return (
    <AnimatedList delay={800} className="max-w-sm">
      <div className="rounded-md border p-3">First item</div>
      <div className="rounded-md border p-3">Second item</div>
      <div className="rounded-md border p-3">Third item</div>
    </AnimatedList>
  );
}

​
Key props

​
children
ReactNode
The list items to animate. Each child will be revealed sequentially.
​
delay
number
default:"1000"
Time in milliseconds between each item’s reveal animation.
​
className
string
Additional CSS classes to apply to the list container.

​
Styling tip

  • Keep items short; staggered delays help readability (100–150ms steps).
  • Avoid combining with other heavy animations on the same screen.