Carousel
ProScroll-snapping slides you move with buttons, dots, arrow keys or by dragging with the mouse.
pnpm dlx shadcn@latest add @latheui/carouselPart of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.
Carousel is part of Lathe Pro
The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.
Depends on
- lucide-react
- motion
API reference
Carousel
Also accepts native section attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
| label* (required) | string | — | Accessible name of the carousel. |
| showDots | boolean | true | Shows the dot navigation. |
| onIndexChange | (index: number) => void | — | Called with the index of the slide nearest the start edge. |
| trackClassName | string | — | Classes for the scrolling track, for example gap-6. |
| children* (required) | ReactNode | — | CarouselItem elements. |
CarouselItem
One slide. Accepts native div attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | "basis-full" | Set the slide width with a basis class. |
Keyboard
- Tab
- Focuses the track, then the dots and the previous and next buttons.
- ArrowLeftArrowRight
- On the track: moves one slide.
- HomeEnd
- On the track: moves to the first or last slide.
Accessibility
- The carousel is a labelled section with the carousel role description, and each slide is announced with its position, such as “2 of 4”.
- It never moves on its own. There is no autoplay, so there is nothing to pause.
- Every slide stays in the DOM and is reachable by scrolling, so content is not hidden from assistive tech or find-in-page.
- Touch and trackpad use native scrolling with snap points, which keeps momentum and edge behavior exactly as the platform does it.
- Previous and next are disabled at the ends rather than wrapping, so position is always clear.
Motion
- Buttons, dots and keys glide to the target slide on a spring. The active dot widens.
- A mouse drag follows the pointer one to one. Letting go carries the fling's speed into a spring that settles on the nearest slide, so a quick flick travels further than a slow pull. Grabbing a gliding track catches it in place.
- With reduced motion, the carousel jumps to the slide without animating.
Customization
Gap and slide width
<Carousel label="Testimonials" trackClassName="gap-6">
<CarouselItem className="basis-4/5 md:basis-1/3">…</CarouselItem>
</Carousel>