Animated listPro
A feed where new entries spring in at the top and older ones make room.
- Payment received$129.00 from Northwind
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
Usage
Import it from @/components/ui/animated-list after installing.
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.
This page as Markdown, for assistants and coding agents:
/components/animated-list/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt