║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Carousel description: A carousel component with card stack visualization for cycling through content.

<ComponentPreview name="carousel-demo" className="" description="A vertical card stack carousel with navigation controls." />

Installation

<Tabs defaultValue="cli" className="w-full"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli"> <PkgOptions name="carousel" /> </TabsContent> <TabsContent value="manual"> <Steps>

<Step>Copy and paste the following code into your project.</Step>

<p> <code>carousel.tsx</code> </p> <ComponentSource name="carousel" />

<Step>Add util file</Step>

<p> <code>lib/utils.ts</code> </p>

import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

</Steps> </TabsContent> </Tabs>

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

---

<Step>Carousel with Image</Step>

<ComponentPreview name="carouselimage-demo" className="" description="A carousel displaying images in a stacked format." />

---

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

<PropsTable rows={[ { prop: "className", type: "string", default: "—", description: "Extra CSS classes. Used in all components." }, { prop: "children", type: "ReactNode", default: "required", description: "Inner content. Used in Carousel, CarouselContent, CarouselItem." }, { prop: "maxVisible", type: "number", default: "3", description: "Number of visible stacked cards. Used in CarouselContent." }, { prop: "stackOffset", type: "number", default: "20", description: "Vertical gap between stacked cards. Used in CarouselContent." }, { prop: "variant", type: '"default" | "outline" | "ghost" | "link"', default: '"outline"', description: "Button style. Used in CarouselPrevious, CarouselNext." }, { prop: "size", type: '"default" | "sm" | "lg" | "icon"', default: '"icon"', description: "Button size. Used in CarouselPrevious, CarouselNext." }, { prop: "onClick", type: "() => void", default: "—", description: "Click handler. Used in CarouselPrevious, CarouselNext." }, { prop: "disabled", type: "boolean", default: "false", description: "Disables button. Used in CarouselPrevious, CarouselNext." } ]} />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║