Carousel

Carousel is an Embla-powered slider for stepping through a set of items one screen at a time. It is composed of a root, a content track, individual items, and previous/next controls. Arrow keys move between slides, and the controls disable themselves at the ends. Reach for it to present a small gallery, an onboarding sequence, or a row of cards that should not all fit at once.

Live demo

The interactive story below runs from the deployed Storybook.

Usage

Source: carousel.tsx

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselPrevious,
  CarouselNext,
} from "@beacon/design-system";

<Carousel className="w-full max-w-sm mx-auto">
  <CarouselContent>
    {[1, 2, 3, 4, 5].map((n) => (
      <CarouselItem key={n}>
        <div className="flex items-center justify-center h-32 rounded-lg bg-muted">
          Slide {n}
        </div>
      </CarouselItem>
    ))}
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

Parts

Part	Role
Carousel	Root and context provider. Accepts orientation ("horizontal" | "vertical"), Embla opts, plugins, and setApi.
CarouselContent	The scrolling track that lays out the items.
CarouselItem	A single slide; defaults to full-width (basis-full).
CarouselPrevious	Button that scrolls to the previous slide; disables at the start.
CarouselNext	Button that scrolls to the next slide; disables at the end.

The CarouselApi type is exported for reading or controlling state via setApi.

When to use

• Present a small gallery of images or media.
• Step a user through a short onboarding or tour sequence.
• Show a row of cards that should be browsed rather than fully displayed.

Do not use a carousel to hide content the user needs to compare side by side. If every item must be visible at once, lay them out in a grid instead.