Carousels

Usage and anatomy

Carousel displays a collection of slides with keyboard-aware navigation. Use <Carousel.Root /> for state and configuration, <Carousel.Content /> as the viewport, and wrap each slide in <Carousel.Item />.

import * as Carousel from "@acme/ui/carousel"

<Carousel.Root>
  <Carousel.Content>
    {items.map((item) => (
      <Carousel.Item key={item.id}>{item.content}</Carousel.Item>
    ))}
  </Carousel.Content>
  <Carousel.Previous />
  <Carousel.Next />
  <Carousel.Indicators />
</Carousel.Root>

• Use Previous and Next for explicit navigation and Indicators when users need direct slide access.
• Set orientation on Carousel.Root; the content and navigation controls inherit it.
• Pass Embla options through opts and plugins through plugins.

API reference

Carousel.Root

Carousel.Root also accepts native div props. Carousel.Content, Carousel.Item, and Carousel.Indicators accept native div props; Carousel.Previous and Carousel.Next accept native button props.