Keyboard-friendly list with a staggered entrance, a sliding highlight and scroll fades.
npx shadcn@latest add https://hyperblur.dev/r/animated-list.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/animated-list.tsx.
import { AnimatedList } from "@/components/hyperblur/animated-list"
<AnimatedList items={["Profile", "Billing", "Team", "Sign out"]} onSelect={(i) => console.log(i)} />| Prop | Type | Default | Description |
|---|---|---|---|
| items | ReactNode[] | required | Content of each row. |
| onSelect | (index: number) => void | Called on click or when Enter is pressed on the selected row. | |
| initialSelected | number | -1 | Index selected on mount. -1 means none. |
| showGradients | boolean | true | Fade the top and bottom edges while the list can scroll. |
| maxHeight | number | 320 | Maximum height in pixels before the list scrolls. |