Astra

Circular Carousel

A 3D ring of images with bendable cards, momentum drag, snapping and click to focus.

Circular Carousel, a Astra component

Use Circular Carousel 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/CircularCarousel-TS-TW
How to install Astra components

Related components

  • Circular Gallery

    A curved image gallery you can drag, scroll or tab through, with cards that open to the full image.

  • Depth Carousel

    Cards recede into depth on a 3D rail, with drag, keyboard and auto-advance.

  • Stack

    Pile of cards you can drag, flick or click through, with thrown cards tucking underneath.