Components

Carousel

Slide-through container powered by embla-carousel-react. Prev / Next arrows use the outline Button size-icon. Horizontal or vertical orientation.

Updated Jul 10, 2026 by Leonardo Posada

Variants

1
2
3
<Carousel className="w-64">
  <CarouselContent>
    {[1,2,3].map((n) => <CarouselItem key={n}>{n}</CarouselItem>)}
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

When to use

  • Onboarding walkthroughs with a few screens.
  • Image or media browsing where one slide at a time is intentional.

When not to use

  • Long lists — use a Table or grid.
  • Marketing hero rotation — carousels lose the click for anything past slide 1.

Usage

Do
  • Show clear Prev/Next controls; don't rely on drag alone.
  • Cap slides to under 6.
Don't
  • Don't auto-play carousels in dashboards.