Browse components
Animated List
Items drop in one at a time, like a live notification feed.
Installation
npx shadcn@latest add @glint-ui/animated-listFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/animated-list.json
Usage
import { AnimatedList } from "@/components/ui/animated-list";
<AnimatedList items={notifications.map((n) => <Notification key={n.id} {...n} />)} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | ReactNode | — | Array of nodes to cycle through. |
| delay | number | 1200 | Ms between new items. |
| max | number | 4 | Max items visible. |
| className | string | — | Extra classes for the root element. |