Astra

Animated List

A scrolling list whose rows spring into view, with a gliding selection and arrow keys.

Animated List, a Astra component

Use Animated List in your project

Choose JavaScript or TypeScript and plain CSS or Tailwind. Enable JavaScript for the interactive preview, customization controls and source tabs.

npx shadcn@latest add @react-bits/AnimatedList-TS-TW
How to install Astra components

Related components

  • Flowing Menu

    A full-height menu with a liquid band that glides between rows and reveals a scrolling marquee of each item.

  • Option Wheel

    Curved option picker that spins with scroll, drag or arrow keys, tilting items away.

  • Stepper

    A multi-step flow with a gliding step indicator, spring transitions and horizontal or vertical layouts.