Components
Carousel
A large image viewer with an optional thumbnail list, hover arrows, a position counter, drag or click navigation, and a fullscreen view.
Carousel shows one large image at a time. Use the position prop to place a thumbnail list beside the image, or leave it out to show the image alone.
- Hover over the image to show the
<and>buttons, or drag the image left or right. - Click a thumbnail to jump to that image.
- The counter in the bottom-right shows the current position.
- Click the fullscreen button to view the current image over a dark backdrop. Use
<and>(or the arrow keys) to move between images, and click anywhere or pressEscapeto close.
Installation
bunx --bun shadcn@latest add https://docs.danpoj.site/r/carousel.jsonRunning the command above installs the carousel component along with its dependencies: the shadcn button component (used for the arrow and fullscreen buttons) and the motion package (used for the spring animation and the fullscreen view).
Examples
Thumbnails on the left
1 / 9
Thumbnails on the right
1 / 9
Thumbnails on the top
1 / 9
Thumbnails on the bottom
1 / 9
Without thumbnails
When position is not passed, the carousel shows only the large image, the arrows, and the counter.
1 / 9
Props
| Prop | Type | Default | Description |
|---|---|---|---|
images | string[] | - | The image URLs to show, in order. Renders nothing when the array is empty. |
position | 'left' | 'right' | 'top' | 'bottom' | null | null | Where the thumbnail list is placed relative to the large image. null hides the thumbnail list. |
speed | number | 25 | Speed of the slide animation. Higher values move faster and settle sooner. |
className | string | - | Extra classes merged with the root element. Use it to set the width, for example max-w-xl. |
Last updated on