The AnimatedList component streams its children in one at a time, springing each new entry into place and pushing the older ones down until they fall out of the bottom of the list.
Add it with the CLI, open it in v0, or copy the source into your project.
Adds the component and installs its dependencies for you.
npx shadcn@latest add https://uibeats.com/r/animated-list.jsonEverything Animated List accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | No default | One entry per child, emitted in order |
| delay | number | 1400 | Milliseconds between entries arriving |
| max | number | 4 | How many entries stay on screen before the oldest is dropped |
| loop | boolean | true | Start over once the last child has been emitted |
| live | boolean | false | Announce arrivals to screen readers, for genuinely live content |
| className | string | '' | Additional CSS classes applied to the list |
New star on ui-beats
just now