Sections

Components

Utilities

Forms

Hooks

useIsMobile

Carousel

Copy Markdown

Lets users cycle through a series of items.

Docs API

PreviewCode

Installation#

CLIManual

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 />
  </CarouselContent>
</Carousel>

Orientation#

Horizontal#

PreviewCode

Vertical#

PreviewCode

Thumbnail Indicators#

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

Horizontal#

PreviewCode

Vertical#

PreviewCode

Examples#

Autoplay#

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

PreviewCode

Loop#

Use loop prop to make the carousel loop.

PreviewCode

Controlled#

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

PreviewCode

Current page: 1 of 5

Slides Per Page#

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

PreviewCode

Spacing#

Control the gap between slides using the spacing prop on Carousel.

PreviewCode

Mouse Drag#

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

PreviewCode

API Reference#

Carousel#

Root component. Manages slide state and navigation.

Prop	Type	Default
`slideCount`	`number`	required
`allowMouseDrag`	`boolean`	`false`
`autoplay`	`boolean	{ delay: number }`
`defaultPage`	`number`	`0`
`loop`	`boolean`	`false`
`orientation`	`"horizontal"	"vertical"`
`page`	`number`	`-`
`slidesPerPage`	`number`	`1`
`slidesPerMove`	`number	'auto'`
`spacing`	`string`	`"16px"`
`padding`	`number`	`0`
`className`	`string`	`-`

CarouselContent#

Wraps all slides. Handles layout and transitions.

Prop	Type	Default
`className`	`string`	`-`
`asChild`	`boolean`	`false`

CarouselItem#

Wraps a single slide.

Prop	Type	Default
`index`	`number`	required
`snapAlign`	`"start"	"center"
`className`	`string`	`-`
`asChild`	`boolean`	`false`

CarouselControl#

Holds prev/next navigation buttons.

Prop	Type	Default
`className`	`string`	`-`
`asChild`	`boolean`	`false`

CarouselPrevious#

Goes to the previous slide.

Prop	Type	Default
`className`	`string`	`-`

CarouselNext#

Goes to the next slide.

Prop	Type	Default
`className`	`string`	`-`

CarouselIndicatorGroup#

Holds slide indicator dots or pills.

Prop	Type	Default
`className`	`string`	`-`
`asChild`	`boolean`	`false`

CarouselIndicator#

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

Prop	Type	Default
`index`	`number`	required
`readOnly`	`boolean`	`false`
`className`	`string`	`-`
`asChild`	`boolean`	`false`

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

[

Card ](/docs/components/card)[

Chart ](/docs/components/chart)

On This Page

Installation Anatomy Usage Orientation Horizontal Vertical Thumbnail Indicators Horizontal Vertical Examples Autoplay Loop Controlled Slides Per Page Spacing Mouse Drag API Reference Carousel CarouselContent CarouselItem CarouselControl CarouselPrevious CarouselNext CarouselIndicatorGroup CarouselIndicator