Components
Carousel
A touch-friendly, accessible carousel built on Embla Carousel with previous/next controls and keyboard support.
Install
npx shadcn@latest add https://atomx.acau.net/r/carousel.jsonUsage
Carousel wraps Embla Carousel's useEmblaCarousel hook. Place CarouselContent and any number of CarouselItem children inside it. Add CarouselPrevious and CarouselNext for navigation buttons — these are positioned absolutely, so the parent needs enough horizontal padding.
<Carousel>
<CarouselContent>
<CarouselItem>Slide 1</CarouselItem>
<CarouselItem>Slide 2</CarouselItem>
<CarouselItem>Slide 3</CarouselItem>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>Preview
Slide 1
Slide 2
Slide 3
Slide 4
Props
Carousel extends React.HTMLAttributes<HTMLDivElement>.
| Prop | Type | Notes |
|---|---|---|
orientation | "horizontal" | "vertical" | Scroll axis. Defaults to "horizontal". |
opts | EmblaOptionsType | Passed directly to useEmblaCarousel. |
plugins | EmblaPluginType[] | Embla plugins (e.g. Autoplay). |
setApi | (api) => void | Receive the Embla API instance for programmatic control. |
CarouselPrevious and CarouselNext extend Button props (variant, size, className).