Sections

Utilities

Carousel

Interactive slideshow for cycling through content.

Installation


pnpm dlx shadcn@latest add https://shark.vini.one/r/carousel.json

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

Vertical

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

Vertical

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.

Current page: 1 of 5

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.

Prop	Type	Default
`slideCount`	`number`	required
`allowMouseDrag`	`boolean`	`false`
`autoplay`	`boolean \| { delay: number }`	`false`
`defaultPage`	`number`	`0`
`loop`	`boolean`	`false`
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`
`page`	`number`	`-`
`slidesPerPage`	`number`	`1`
`slidesPerMove`	`number \| 'auto'`	`'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' \| 'end'`	`'start'`
`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.