DEV Community

Cover image for Composable React Carousel: Autoplay, Loop, Drag, and Swipe
jQueryScript
jQueryScript

Posted on

Composable React Carousel: Autoplay, Loop, Drag, and Swipe

carouselcn: a composable React carousel built with Tailwind CSS and shadcn/ui that uses CSS transitions for all slide movement.

Key features:

  • No Framer Motion or external animation runtime
  • Copy the source into your project and own it completely
  • Horizontal and vertical orientation
  • Loop, autoplay, drag, swipe, and keyboard navigation
  • Controlled mode via an onIndexChange callback
  • useCarousel and useCarouselAutoplay hooks for direct state access. If you're already on a shadcn/ui project, it drops into your existing components/ui folder with no extra setup.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Top comments (0)