Carousel
Embla-based carousel primitives for swipeable content.
Quick Preview
Apartment
Duplex
Terrace
Composition
Use this public composition when building Carousel:
Carousel
├── CarouselContent
│ └── CarouselItem
├── CarouselPrevious
├── CarouselNext
└── CarouselIndicatorUsage
<Carousel><CarouselContent><CarouselItem>Slide 1</CarouselItem></CarouselContent></Carousel>Examples
Default Carousel
Arrows and the windowed dot indicator float over the slides on a glass chrome. Keyboard arrows follow the scroll axis.
Apartment
Duplex
Terrace
Orientation
Use vertical orientation when the carousel lives in a tall media slot or sidebar. Up/Down arrow keys drive vertical carousels.
Apartment
Duplex
Terrace
Props
| Prop/API | Type | Default | Description |
|---|---|---|---|
orientation | `"horizontal" | "vertical"` | "horizontal" |
size | `"sm" | "md" | "lg"` |
imageSize | `"sm" | "md" | "lg" |
opts / plugins | Embla options/plugins | - | Forwarded to Embla carousel. |
setApi | (api: CarouselApi) => void | - | Exposes the Embla API for external control. |
count / selected / onSelect | number / number / (index) => void | from context | CarouselIndicator overrides for standalone use. |
className | string | - | Local layout or spacing overrides. |
| native/root props | React component props | - | Passed through to the underlying root or primitive. |
Accessibility
- Preserve the documented Carousel composition so labels, triggers, content, and controls remain connected.
- The root is a
regionwitharia-roledescription="carousel"; slides are groups witharia-roledescription="slide". - Arrow keys (matching the orientation) move between slides when focus is inside the carousel.
- Provide visible labels or accessible names for interactive controls.
- Do not communicate state with color alone; include text, icons, or helper copy.