Components

Carousel

A swipeable, keyboard-navigable slider built on Embla for stepping through cards, media, or any horizontal collection of content.

Basic usage

Compose CarouselContent with one CarouselItem per slide, then add the previous and next controls.

1
2
3
4
5

Multiple per view

Set a fractional basis on each item (e.g. basis-1/3) and align slides to the start to show several at once.

1
2
3
4
5
6
7
8

Infinite loop

Pass opts={{ loop: true }} so the carousel wraps around and the controls never disable at the ends.

Strategy
Audit
Compliance
Advisory

Props

Props apply to the root Carousel. CarouselContent, CarouselItem, CarouselPrevious, and CarouselNext accept their native element props (the controls also accept any Button prop).

PropTypeDefaultDescription
orientation'horizontal' | 'vertical''horizontal'Scroll axis of the carousel. Vertical mode rotates the navigation buttons and stacks items.
optsEmblaOptionsType—Embla options forwarded to the carousel engine, e.g. { align: "start", loop: true }.
pluginsEmblaPluginType[]—Embla plugins such as Autoplay or WheelGestures.
setApi(api: CarouselApi) => void—Receives the Embla API instance for building external controls or slide indicators.
classNamestring—Additional Tailwind classes merged onto the root region.
...restHTMLDivAttributes—All native div props are forwarded to the carousel region.

Accessibility

  • The root is a role="region" with aria-roledescription="carousel", and each item is a role="group" labelled as a slide.
  • Focus the carousel and use the Left and Right arrow keys to step between slides.
  • The previous and next buttons render native <button> elements with a visually-hidden “Previous slide” / “Next slide” label and a focus-visible ring.
  • Controls become disabled at the start and end of the track (unless loop is enabled), removing them from the tab order when there is nowhere left to scroll.