Carousel

A carousel component with card stack visualization for cycling through content.

Installation

npx shadcn@latest add https://scrollxui.dev/registry/carousel.json

Usage

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

<Carousel className="w-full max-w-xs">
      <CarouselContent>
        {Array.from({ length: 5 }).map((_, index) => (
          <CarouselItem key={index}>
            <div className="p-1">
              <Card>
                <CardContent className="flex aspect-square items-center justify-center p-6">
                  <span className="text-4xl font-semibold">{index + 1}</span>
                </CardContent>
              </Card>
            </div>
          </CarouselItem>
        ))}
      </CarouselContent>
    </Carousel>

Examples

Carousel with Image

Changelog

25-10-2025, Carousel Refactor

Rebuilt Carousel with React Context for shared state.
Added keyboard navigation (↑ ↓).
Added maxVisible and stackOffset props for stacked layout.
Introduced useCarousel() hook and data-slot attributes.
Improved accessibility with ARIA roles.
Simplified controls using CarouselPrevious and CarouselNext.

API Reference

Carousel

The Carousel component is the main container for the card stack carousel.

Props

Property	Type	Default	Description
`className`	string	`—`	Extra CSS classes. Used in all components.
`children`	ReactNode	`required`	Inner content. Used in Carousel, CarouselContent, CarouselItem.
`maxVisible`	number	`3`	Number of visible stacked cards. Used in CarouselContent.
`stackOffset`	number	`20`	Vertical gap between stacked cards. Used in CarouselContent.
`variant`	"default" \| "outline" \| "ghost" \| "link"	`"outline"`	Button style. Used in CarouselPrevious, CarouselNext.
`size`	"default" \| "sm" \| "lg" \| "icon"	`"icon"`	Button size. Used in CarouselPrevious, CarouselNext.
`onClick`	() => void	`—`	Click handler. Used in CarouselPrevious, CarouselNext.
`disabled`	boolean	`false`	Disables button. Used in CarouselPrevious, CarouselNext.