Skip to content

Carousel

Slides the user steps through with the buttons, a swipe, or the arrow keys. No autoplay, and don't hide anything essential after the first slide.

Sourcecomponents/carousel.tsx

Usage

Carousel usage
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/carousel";
export function CarouselUsage({ templates }: { templates: { id: string; name: string }[] }) {  return (    <Carousel aria-label="Featured templates">      <CarouselContent>        {templates.map((template) => (          <CarouselItem key={template.id}>{template.name}</CarouselItem>        ))}      </CarouselContent>      <CarouselPrevious />      <CarouselNext />    </Carousel>  );}

When to use

Use when

Optional, browsable extras: a gallery, template previews. Name it with aria-label. Requires embla-carousel-react

Don’t use when

Content the user must see (often only the first slide gets seen; show it as a list); autoplay (not supported: it needs a pause control)