Layout

Carousel

A touch-friendly, accessible slideshow for cycling through items, powered by Embla.

Preview

import { Card, CardContent } from '@brika/clay/components/card';
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from '@brika/clay/components/carousel';
const SLIDES_5 = [1, 2, 3, 4, 5] as const;

export default function CarouselDefaultDemo() {
  return (
    <Carousel className="w-full max-w-xs">
      <CarouselContent>
        {SLIDES_5.map((n) => (
          <CarouselItem key={n}>
            <Card>
              <CardContent className="flex aspect-square items-center justify-center p-6">
                <span className="font-semibold text-4xl">{n}</span>
              </CardContent>
            </Card>
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  );
}

01 Installation

Install

Pull Carousel from the barrel for everyday use, or the granular path when you want a tighter bundle.

tsxBarrel1 line

import { Carousel } from "@brika/clay";

tsxGranular1 line

import { Carousel } from "@brika/clay/components/carousel";

02 Usage

A minimal example

Drop this into a page. Native HTML attributes pass through to the underlying primitive.

tsxCarousel.tsx29 lines

import { Card, CardContent } from '@brika/clay/components/card';
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from '@brika/clay/components/carousel';
const SLIDES_5 = [1, 2, 3, 4, 5] as const;

export default function CarouselDefaultDemo() {
  return (
    <Carousel className="w-full max-w-xs">
      <CarouselContent>
        {SLIDES_5.map((n) => (
          <CarouselItem key={n}>
            <Card>
              <CardContent className="flex aspect-square items-center justify-center p-6">
                <span className="font-semibold text-4xl">{n}</span>
              </CardContent>
            </Card>
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  );
}

03 Examples

Carousel, every way

Multiple

GitHub

import { Card, CardContent } from '@brika/clay/components/card';
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from '@brika/clay/components/carousel';
const SLIDES_6 = [1, 2, 3, 4, 5, 6] as const;

export default function CarouselMultipleDemo() {
  return (
    <Carousel opts={{ align: 'start' }} className="w-full max-w-sm">
      <CarouselContent className="-ml-2">
        {SLIDES_6.map((n) => (
          <CarouselItem key={n} className="basis-1/3 pl-2">
            <Card>
              <CardContent className="flex aspect-square items-center justify-center p-2">
                <span className="font-semibold text-2xl">{n}</span>
              </CardContent>
            </Card>
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  );
}

04 Accessibility

Accessibility

Root carries role="region" with a label; each slide has role="group" aria-roledescription="slide".
Previous/Next buttons include sr-only screen-reader labels.
Left/Right arrow keys navigate slides while focus is inside the carousel.
Autoplay should pause on hover and focus to respect user attention and prefers-reduced-motion.

05 API reference

API reference

Props specific to Carousel. Native HTML attributes pass through to the underlying primitive, see the component source on GitHub for the full type signature.

<Carousel />

4 props

opts
CarouselOptions
Embla carousel options (e.g. { loop: true, align: 'start' }).
orientationdefault 'horizontal'
'horizontal' | 'vertical'
Scroll axis, "horizontal" (default) or "vertical".
plugins
CarouselPlugin
Embla plugins (e.g. Autoplay).
setApi
(api: CarouselApi) => void
Callback that receives the Embla API instance once initialized.