Carousel

Installation

pnpmbunnpmyarn
pnpm dlx shadcn@latest add @shark/carousel

Anatomy

Carousel
├── CarouselContent
│   └── CarouselItem
├── CarouselControl
│   ├── CarouselPrevious
│   └── CarouselNext
└── CarouselIndicatorGroup
    └── CarouselIndicator

Usage

import { 
  Carousel,
  CarouselControl,
  CarouselItem,
  CarouselContent,
  CarouselIndicator,
  CarouselIndicatorGroup,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel"; 

<Carousel>
  <CarouselControl>
    <CarouselPrevious>Previous</CarouselPrevious>
    <CarouselNext>Next</CarouselNext>
  </CarouselControl>
  <CarouselContent>
    <CarouselItem />
    <CarouselItem />
    <CarouselItem />
  </CarouselContent>
</Carousel>

Orientation

The orientation prop controls the carousel layout direction.

Horizontal

PreviewCode

Vertical

PreviewCode

Thumbnail Indicators

Render each thumbnail inside <CarouselIndicator /> to create a visual preview of each slide.

Use the orientation prop to change the orientation of the thumbnail indicators.

Horizontal

PreviewCode

Vertical

PreviewCode

Examples

Autoplay

Use autoplay props on <Carousel /> to make the carousel play automatically.

Loop

Use the loop prop to make the carousel loop.

Controlled

Use the page and onPageChange props to control the carousel state programmatically.

Slides Per Page

Display multiple slides simultaneously by setting the slidesPerPage prop on <Carousel />.

Spacing

Control the gap between slides using the spacing prop on <Carousel />.

Padding

Control the padding around the carousel using the padding prop on <Carousel />.

Padding is in multiples of 4px. Example: padding={10} will set the padding to 40px.

Mouse Drag

To allow mouse drag, set the allowMouseDrag prop on <Carousel />.

API Reference

Carousel

Root component. Manages slide state and navigation.

CarouselContent

Wraps all slides. Handles layout and transitions.

CarouselItem

Wraps a single slide.

CarouselControl

Holds prev/next navigation buttons.

CarouselPrevious

Goes to the previous slide.

CarouselNext

Goes to the next slide.

CarouselIndicatorGroup

Holds slide indicator dots or pills.

CarouselIndicator

Indicator for a slide. Click to jump to that slide.

For a complete list of props, see the Ark UI documentation.