> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Animated List

> Animated list reveal with motion.

* **Location**: `sabo/src/components/ui/animated-list.tsx`

<Frame>
  <div className="rounded-xl" style={{ overflow: "hidden", border: "1px solid #e5e7eb" }}>
    <iframe
      className="w-full"
      style={{ height: "180px", pointerEvents: "none" }}
      title="Animated List"
      loading="lazy"
      scrolling="no"
      srcDoc={`<!doctype html><html><head><meta charset='utf-8'/><meta name='viewport' content='width=device-width,initial-scale=1'/><style>
  body{margin:0;background:#ffffff;font-family:ui-sans-serif,system-ui}
  .wrap{height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px}
  .item{opacity:0;transform:translateY(10px);background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:10px 14px;margin:6px 0;min-width:180px;text-align:center}
  @keyframes show{to{opacity:1;transform:translateY(0)}}
</style></head><body>
  <div class='wrap'>
    <div class='item'>First item</div>
    <div class='item'>Second item</div>
    <div class='item'>Third item</div>
  </div>
  <script>
    const items=[...document.querySelectorAll('.item')];
    function play(){
      items.forEach((el,i)=>{
        el.style.animation='none';
        void el.offsetWidth; // reflow
        el.style.animation=\`show .6s ease forwards\`;
        el.style.animationDelay=\`\${0.06 + i*0.14}s\`;
      });
    }
    play();
    setInterval(play, 2200);
  </script>
</body></html>`}
    />
  </div>
</Frame>

## When to use

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

## Usage

```tsx sabo/src/components/ui/animated-list.tsx theme={null}
"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

<ParamField path="children" type="ReactNode">
  The list items to animate. Each child will be revealed sequentially.
</ParamField>

<ParamField path="delay" type="number" default="1000">
  Time in milliseconds between each item's reveal animation.
</ParamField>

<ParamField path="className" type="string">
  Additional CSS classes to apply to the list container.
</ParamField>

## Styling tip

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