Animated List

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.

​When to use

​Usage

​Key props

​Styling tip

When to use

Usage

Key props

Styling tip