Browse components
Carousel
A draggable, snapping carousel whose off-center slides tilt away in 3D, with dots, autoplay and arrow-key support.
Installation
npx shadcn@latest add @glint-ui/carouselFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/carousel.json
Usage
import { Carousel } from "@/components/ui/carousel";
<Carousel
items={[
{ image: "/a.jpg", title: "Mountains", description: "Thin air, big views." },
{ image: "/b.jpg", title: "Coast", description: "Salt and wind." },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | ReactNode | — | Array of { image, title, description? }. |
| itemWidth | number | 300 | Slide width in px. |
| itemHeight | number | 340 | Slide height in px. |
| gap | number | 24 | Px between slides. |
| tilt | number | 38 | Max tilt of side slides in degrees. |
| autoplay | boolean | false | Advance automatically (pauses on hover). |
| autoplayDelay | number | 3000 | Ms between autoplay steps. |
| loop | boolean | true | Wrap around at the ends. |
| startIndex | number | 0 | Slide centered on mount. |
| className | string | — | Extra classes for the root element. |