Carousel

The carousel cycles through a set of slides one screen at a time, with previous and next controls. Use it for image galleries, feature highlights, or any horizontally or vertically scrollable strip of cards. It is built on Embla Carousel.

Preview

Installation

npx shadcn@latest add @cubby-ui/carousel

Usage

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/cubby-ui/carousel";

<Carousel>
  <CarouselContent />
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

Composition

Carousel
├── CarouselContent
│   └── CarouselItem
├── CarouselPrevious
└── CarouselNext

Set orientation on Carousel to scroll horizontally or vertically.

Examples

Image Carousel

Place an image inside each CarouselItem for a gallery.

Multiple Items

Set basis on CarouselItem (for example basis-1/2) to show several slides at once.

Responsive Sizes

Use responsive basis utilities to change how many slides show per breakpoint.

Accessibility

CarouselPrevious and CarouselNext carry visually hidden labels and disable themselves at the ends of the list. The carousel region also handles ArrowLeft and ArrowRight to move between slides when focused.

API Reference

The Carousel is built on top of Embla Carousel. Slide behavior (loop, alignment, drag, snapping) is configured through the opts and plugins props, which are forwarded to Embla. The props below are specific to this implementation.

For the full list of Embla options, see the Embla Carousel options documentation.

Props

Carousel

Root container that creates the Embla instance and shares it through context. Renders a div with role="region".

CarouselPrevious

Button that scrolls to the previous slide and disables at the start. Wraps Button.

CarouselNext

Button that scrolls to the next slide and disables at the end. Wraps Button.