Animated List
Free
A scrollable list whose rows pop in as they appear, with keyboard selection and edge fades.
Open issues
Click, or use ↑ ↓ and Enter
Customize
18
Edge fades
Scrollbar
Installation
npx shadcn@latest add https://ui.mekaigames.com/r/animated-list.jsonWorks in any project set up with the shadcn CLI.
Install the dependency.
npm install motion- Copy the code from the Code tab into
components/ui/animated-list.tsx.
Usage
import { AnimatedList } from "@/components/ui/animated-list";
<AnimatedList
label="Issues"
items={issues.map((i) => ({ id: i.id, label: i.title, meta: `#${i.number}` }))}
onSelect={(item) => openIssue(item.id)}
/>Props
10 properties| Property | Type | Default | Description |
|---|---|---|---|
| items | (string | { id, label, description?, meta? })[] | — | Rows in order. |
| onSelect | (item, index) => void | — | Called on click, Enter or Space. |
| selectedId | string | null | — | Selected id, for controlled use. |
| defaultSelectedId | string | — | Selected id when uncontrolled. |
| showGradients | boolean | true | Fade the top and bottom edges while there is more to scroll. |
| displayScrollbar | boolean | true | Show the scrollbar. |
| maxHeight | number | 360 | Maximum height of the scroll area in pixels. |
| fadeColor | string | "#0c0a09" | Color the fades blend into. Match it to the list background. |
| label | string | "Items" | Accessible name of the listbox. |
| className | string | — | Extra classes for the wrapper. |
Dependencies: motion