Carousel

Plan

Build

Ship

Measure

Installation

pnpm dlx shadcn@latest add @paneui/carousel

Usage

import {
  Carousel,
  CarouselContent,
  CarouselDots,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel"

<Carousel aria-label="Photos">
  <CarouselContent>
    <CarouselItem>…</CarouselItem>
    <CarouselItem>…</CarouselItem>
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

Composition

Carousel
├── CarouselContent
│   └── CarouselItem × n
├── CarouselPrevious / CarouselNext
└── CarouselDots

Examples

Several per View

RTL

Behaviour

Slides scroll with native snapping, so touch, trackpad and wheel feel like the platform. ←/→ (↑/↓ when vertical) step one slide; with reduced motion the step jumps instead of scrolling smoothly.

Accessibility

The root is a region with aria-roledescription="carousel" and each item a slide group. Label both, for example "2 of 5" on items.

API Reference

Also accepts every prop of div.

orientation= "horizontal": "horizontal" | "vertical"; Scroll axis. A vertical carousel needs a height.
loop= false: boolean; Buttons and keys wrap at the ends.
onIndexChange: (index: number) => void; Called when the current slide changes.

Prop	Type	Default	Description
orientation	"horizontal" \| "vertical"	"horizontal"	Scroll axis. A vertical carousel needs a height.
loop	boolean	false	Buttons and keys wrap at the ends.
onIndexChange	(index: number) => void	—	Called when the current slide changes.

CarouselItem

basis-full by default. Also accepts every prop of div.

CarouselContent

The scroll container; className goes on the track (gap, padding). Also accepts every prop of div.

CarouselPrevious / CarouselNext

Also accepts every prop of Button.

variant= "secondary": Button variant
size= "icon-sm": Button size

Prop	Type	Default	Description
variant	Button variant	"secondary"
size	Button size	"icon-sm"

CarouselDots

Also accepts every prop of div.

useCarousel

Inside a Carousel: index, count, canPrev, canNext, scrollTo, scrollPrev, scrollNext.