# Animated list

> A feed where new entries spring in at the top and older ones make room.

Component · Pro · https://lodeui.com/components/animated-list

## When to use

- Live feeds: notifications, activity, payments, logs at human speed.

## When not to use

- Long scrollable history: use a timeline or table.

## Installation

```bash
npx shadcn@latest add @lode/animated-list
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { AnimatedList } from "@/components/ui/animated-list";

export function Feed({ events }: { events: Event[] }) {
  return <AnimatedList aria-label="Activity" items={events} getId={(e) => e.id} max={5} renderItem={(e) => <EventRow event={e} />} />;
}
```

## API reference

### AnimatedList

A list that animates additions at the top and removals at the bottom.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| items | `T[]` | – | Newest first. |
| getId / renderItem | `(item) => string / (item) => ReactNode` | – | Stable id and row content. |
| max | `number` | `5` | Rows kept on screen. |
| live | `boolean` | `true` | aria-live="polite" so additions are announced. |

## Accessibility

- A list that announces new items politely; turn live off for very chatty feeds.
- Fades only under reduced motion.

## Motion

- New rows drop in with a spring, scale and blur; others glide down via layout animation.
- Old rows shrink out.

## Responsive behavior

- Fills its container; rows are your own markup.

## Performance

- Only max rows render; prepend rather than rebuilding the array.

## Notes for AI

- Keep ids stable or rows will re-animate.

## Related

- [Timeline](https://lodeui.com/components/timeline) — Vertical activity timeline with toned icons that stagger in.
- [Toast](https://lodeui.com/components/toast) — Stacked notifications that fan out on hover, swipe to dismiss, and track promises.
- [Log viewer](https://lodeui.com/components/log-viewer) — Live log stream with level filters, search and follow mode.