Carousel

A compound component for cycling through a series of slides with keyboard navigation, dot indicators, and optional auto-play.

Installation

npx @obi/ui add carousel

Preview

Usage

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselPrevious,
  CarouselNext,
  CarouselDots,
} from '@/src/components/Carousel/Carousel';

const slides = [1, 2, 3, 4, 5];

export default function Example() {
  return (
    <Carousel aria-label="Number slides" className="w-full max-w-lg">
      <CarouselContent>
        {slides.map(n => (
          <CarouselItem key={n} className="flex items-center justify-center h-48 rounded-lg bg-surface-active select-none">
            <span className="text-6xl font-bold text-text-muted">{n}</span>
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
      <CarouselDots className="mt-3" />
    </Carousel>
  );
}

Props

Name	Type	Default	Description
loop	boolean	false	Wraps from the last slide back to the first (and vice versa).
autoPlay	boolean	false	Automatically advances slides at the specified interval.
interval	number	4000	Milliseconds between auto-advances when autoPlay is enabled.
aria-label	string	"Carousel"	Accessible name for the carousel region landmark. Override with a descriptive value.
className	string	""	Additional classes on the root element.