Display

Carousel

A row of slides with previous and next buttons, on Embla. Swipe, drag or use the arrow keys.

packages/design-system/components/ui/carousel.tsx

Examples

Brand
Website
Product
Motion
System
Horizontal
Brand
Website
Product
Motion
System
Vertical, two to a view

Anatomy

  1. 01Carousel, a region
  2. 02Content, the track
  3. 03Items, basis-full by default
  4. 04Previous and next buttons

Usage

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

<Carousel opts={{ align: "start", loop: true }}>
  <CarouselContent>
    {slides.map((slide) => (
      <CarouselItem key={slide.id} className="basis-1/3">...</CarouselItem>
    ))}
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

Props

PropTypeDefaultDescription
optsEmblaOptionsTypenoneEmbla options: align, loop, dragFree, slidesToScroll.
pluginsEmblaPluginType[]noneAutoplay, class names and the rest.
orientation"horizontal" | "vertical""horizontal"Vertical needs a height on CarouselContent.
setApi(api: CarouselApi) => voidnoneGet Embla's API, for a counter or dots.
CarouselPrevious / NextButton propsvariant "outline", size "icon-sm"Sit outside the track, 48px off each side. Leave room for them.
classNamestringnoneMerged last with cn(). Use it for layout (width, margin), not to restyle the component.

Guidance

Do

  • Set basis-* on items to show more than one.
  • Leave 48px either side for the buttons.

Don't

  • Hide important content on later slides.

Where it's used