Carousel
A carousel with motion and swipe built using Embla.
Installation
pnpm dlx shadcn@latest add https://dga-registry.vercel.app/r/carousel.jsonDefault
Basic carousel with navigation arrows.
1
2
3
4
5
Multiple Items
Show multiple slides at once using basis classes.
1
2
3
4
5
Vertical Orientation
Carousel with vertical scrolling.
1
2
3
4
5
Autoplay
Carousel with automatic slide advancement. Pauses on hover.
1
2
3
4
5
With API
Access the carousel API to display current slide state.
1
2
3
4
5
Slide 0 of 0
Custom Icons
Use different icons for the navigation buttons.
1
2
3
4
5
Props
| Component | Prop | Type | Default | Description |
|---|---|---|---|---|
Carousel | opts | EmblaOptionsType | — | Embla carousel options |
Carousel | plugins | EmblaPluginType[] | — | Embla plugins (e.g., Autoplay) |
Carousel | orientation | "horizontal" | "vertical" | "horizontal" | Scroll direction |
Carousel | setApi | (api) => void | — | Callback to access carousel API |
Carousel | dir | "ltr" | "rtl" | — | Text direction for the carousel |
CarouselItem | className | string | — | Basis classes for sizing |
CarouselPrevious | variant | string | "outline" | Button variant |
CarouselPrevious | icon | HugeIcon | ArrowLeft01Icon | Custom icon |
CarouselNext | variant | string | "outline" | Button variant |
CarouselNext | icon | HugeIcon | ArrowRight01Icon | Custom icon |
RTL Support
When localizing the carousel for RTL languages, set the direction option in opts to match the text direction. This ensures the carousel scrolls in the correct direction.
<Carousel dir={dir} opts={{ direction: dir }}>
<CarouselContent>
<CarouselItem>...</CarouselItem>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>