Shadcn Carousel
React carousel component with touch gestures and smooth animations. Built with TypeScript and Tailwind CSS for Next.js applications using Embla Carousel.
Carousel slides jerky?
Join our Discord community for help from other developers.
Ever built a carousel that feels like wrestling with a shopping cart with broken wheels? Or watched users furiously tap arrows that don't respond fast enough? Yeah, carousels can either make your content shine or turn into user frustration machines. This shadcn/ui carousel actually works the way users expect.
Carousel showcase
Touch-friendly with smooth animations that don't suck:
Built on Embla Carousel with full TypeScript types and touch gesture support. Styled with Tailwind CSS so it matches your design system instead of looking like it crawled out of 2010.
npx shadcn@latest add carouselWhy carousels actually showcase content
Here's the thing—carousels get a bad rap because most of them are terrible. Auto-playing nightmares that users can't control, tiny navigation dots they can't hit, swipe gestures that work "sometimes." But when done right? They're perfect for showing multiple items without eating screen real estate.
Think about your phone's photo gallery or Netflix's movie rows. Users expect to swipe, they expect smooth animations, and they expect the thing to just work. No mystery meat navigation, no guessing if there's more content.
This free shadcn carousel handles all the complex parts—touch detection, keyboard navigation, accessibility—while you focus on your content. Whether you're building product galleries, testimonial sliders, or image showcases in your JavaScript apps, carousels that respond instantly keep users engaged.
Common carousel patterns you'll actually use
Responsive slide counts
Show more items on desktop, fewer on mobile:
Vertical orientation
Perfect for testimonials and timeline content:
Advanced options
Infinite loops, custom alignment, and behavior:
Auto-play with controls
Automatic sliding that users can pause:
Features
This free open source carousel component includes everything you need:
- TypeScript-first - Full type safety with Embla Carousel integration
- Touch gestures - Native swipe support on mobile and tablets
- Keyboard navigation - Arrow keys and Home/End shortcuts work perfectly
- Tailwind CSS styled - Customize with utilities, not fighting vendor CSS
- Memory efficient - Only renders visible slides plus buffers
- Accessible by default - Proper ARIA roles and screen reader support
- Plugin system - Auto-play, fade effects, and custom behaviors
- Programmatic control - Navigate slides via JavaScript API
API Reference
Core Components
| Component | Purpose | Key Props |
|---|---|---|
Carousel | Root container | orientation, opts, plugins, setApi |
CarouselContent | Scrollable wrapper | className for spacing |
CarouselItem | Individual slide | className for sizing |
CarouselPrevious | Previous button | Auto-disabled at start |
CarouselNext | Next button | Auto-disabled at end |
Common Options
Configure behavior with the opts prop:
| Option | Values | Purpose |
|---|---|---|
align | "start" | "center" | "end" | Slide alignment |
loop | boolean | Infinite scrolling |
slidesToScroll | number | "auto" | Slides per navigation |
startIndex | number | Initial slide |
Programmatic Control
Use setApi to control the carousel:
const [api, setApi] = useState<CarouselApi>()
// Navigate programmatically
api?.scrollTo(2)
api?.scrollNext()
api?.scrollPrev()
// Check state
const canScrollNext = api?.canScrollNext()
const currentSlide = api?.selectedScrollSnap()Production tips
Don't auto-play everything. This free shadcn/ui carousel supports auto-play plugins, but use them sparingly. Auto-play works for hero banners and ambient content. It's terrible for content users need to read or interact with. Your React carousel should serve users, not annoy them.
Show partial next slides. Make it obvious there's more content by showing a sliver of the next slide. This TypeScript component handles the math—just set your slide widths to be slightly less than 100% of the container.
Touch targets matter on mobile. Those tiny arrow buttons look fine on desktop. On mobile, they're impossible to hit accurately. Make navigation buttons at least 44px square. Your Next.js app needs to work for thumbs, not just mouse pointers.
Performance counts with images. Lazy load images outside the visible area. The carousel only renders visible slides plus buffers, but if each slide has a 2MB hero image, you'll still kill performance. This open source shadcn component is efficient—your content strategy needs to be too.
Test swipe gestures on real devices. Swipe sensitivity varies between devices and browsers. What feels natural on your MacBook trackpad might be sluggish on an Android phone. Test on actual hardware, not just dev tools device mode.
Integration with other components
Carousels naturally showcase other shadcn components in your React applications. Use Card components as slide content for product galleries or feature showcases. Button components work perfectly for custom navigation controls.
For e-commerce, combine carousels with Badge components to highlight sale items or product categories. This open source pattern keeps information organized while maintaining visual appeal.
In testimonials, pair carousel slides with Avatar components for speaker photos. When building image galleries, AspectRatio components ensure consistent slide dimensions. Your JavaScript carousel becomes a container for rich, interactive content.
Questions you might have
Shadcn Card
React card component for organizing content with headers, actions, and footers. Built with TypeScript and Tailwind CSS for Next.js with semantic HTML.
Shadcn Checkbox
React checkbox component with three states and form integration. Built with TypeScript and Tailwind CSS for Next.js applications using Radix UI primitives.