Search for a command to run...
A horizontally (or vertically) scrolling row of slides built on `embla-carousel-react`. Use for onboarding flows, scrollable card rows, image galleries — anywhere a user can paginate through a small set of peer items.
CarouselPrevious and CarouselNext are auto-positioned outside the slide rail — overrideable via className if you need them inset or anchored elsewhere. They auto-disable at the start / end of the rail.
Add a knowledge source
Train your responses
Publish your mind
Connect
Train
Publish
Share
CarouselWraps embla's useEmblaCarousel hook and provides context to all sub-components. Forwards every native <div> prop plus:
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" | Scroll axis. Vertical needs an explicit height on Carousel and CarouselContent. |
opts | EmblaOptionsType | — | Pass-through for embla's options. Common: align: "start" | "center" | "end", loop: true, slidesToScroll: number, dragFree: true. |
plugins | EmblaPluginType[] | — | Pass-through for embla plugins (e.g. embla-carousel-autoplay). Install the plugin package separately. |
setApi | (api: CarouselApi) => void | — | Receive the embla API after mount so you can drive the carousel from a parent (e.g. dots, jump-to-slide). |
CarouselContentThe scrollable rail. Renders the embla viewport and applies axis-specific gutters so CarouselItem spacing reads correctly in both orientations.
CarouselItemA single slide. Defaults to full-width (one item per view); set className="basis-1/2" / basis-1/3" / basis-1/4" for multi-item layouts. Each item gets aria-roledescription="slide" for assistive tech.
CarouselPrevious · CarouselNextAuto-positioned navigation buttons. Forward every Button prop, including variant (default "outline") and size (default "icon-sm"). They auto-disable when scrolling further isn't possible.
CarouselApiType-only export for the embla instance handed back via setApi. Use it to wire up secondary controls (dot indicators, jump-to-slide, slide counters):
Use carousels for small, peer collections of slides — 3–10 items where the user is meant to browse through. For long ordered lists, prefer a scrollable container.
Set opts={{ align: "start" }} for multi-item carousels so the leading edge of the rail stays
pinned during paging — feels less like the rail "drifts" when scrolling.
Combine with CarouselApi for compound controls like dot pagers or slide counters.
CarouselPrevious / CarouselNext are the minimum affordance; richer indicators read better
for onboarding-style flows.
Use a carousel where a regular grid would do. Carousels hide content behind interaction — if the items can fit on one screen, show them all.
Hide critical actions inside slides. Anything the user must complete should live on the page, not behind a "next slide" button.
Forget to size Carousel and CarouselContent in vertical orientation. Vertical carousels need
an explicit height — embla can't measure a fluid axis.