Carousel
Installation
Add the component with the CLI.
npx shadcn@latest add @intentui/carousel
Composed components
When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.
Manual installation
Install the dependencies, then copy the component source into your project.
npm install react-aria-components embla-carousel-react @heroicons/react cn
Anatomy
import {
Carousel,
CarouselButton,
CarouselContent,
CarouselHandler,
CarouselItem,
} from "@/components/ui/carousel"<Carousel>
<CarouselContent>
<CarouselItem className="basis-1/2">Slide 1</CarouselItem>
<CarouselItem className="basis-1/2">Slide 2</CarouselItem>
<CarouselItem className="basis-1/2">Slide 3</CarouselItem>
</CarouselContent>
<CarouselHandler>
<CarouselButton segment="previous" />
<CarouselButton segment="next" />
</CarouselHandler>
</Carousel>Examples
Orientation
You can change the orientation of the carousel by using the orientation prop. The default is horizontal, but you can switch it to vertical.
Options
Use opts to configure carousel behavior, including looping and alignment.
Autoplay
Install the Embla Carousel autoplay plugin to advance slides automatically.
npm install embla-carousel-autoplay
Pass the installed plugin through plugins.
Link
If you need a link in carousel item, it simple, add href to the CarouselItem.
<CarouselItem href="/path/to/page"/>Component API
Carousel
Carousel extends the native <div> element.
classNamestringoptsCarouselOptionsorientation"horizontal" | "vertical"horizontalpluginsCarouselPluginsetApi(api: CarouselApi) => voidCarouselButton
CarouselContent
CarouselContent extends the native <div> element.
classNamestringCarouselHandler
CarouselHandler extends the native <div> element.
classNamestringCarouselItem
CarouselItem extends the native <div> element.
classNamestringSee the React Aria and Embla Carousel API reference for the full API reference.
