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

---

title: Carousel description: A composable card carousel with horizontal scroll, keyboard and button navigation.

<ComponentPreview name="carousel-demo" />

Installation

<InstallationTabs> <InstallationTabsList> <InstallationTabsTrigger value="cli">CLI</InstallationTabsTrigger> <InstallationTabsTrigger value="manual">Manual</InstallationTabsTrigger> </InstallationTabsList> <InstallationTabsContent value="cli"> <CodeBlockTabs> <CodeBlockTabsList> <CodeBlockTabsTrigger value="npm">npm</CodeBlockTabsTrigger> <CodeBlockTabsTrigger value="pnpm">pnpm</CodeBlockTabsTrigger> </CodeBlockTabsList> <CodeBlockTab value="npm">

npx shadcn@latest add @roiui/carousel

npx shadcn@latest add @roiui/carousel-tailwind

</CodeBlockTab> <CodeBlockTab value="pnpm">

pnpm dlx shadcn@latest add @roiui/carousel

pnpm dlx shadcn@latest add @roiui/carousel-tailwind

</CodeBlockTab> </CodeBlockTabs> </InstallationTabsContent> <InstallationTabsContent value="manual" data-manual="true">

Copy and paste the following files:

<ComponentSource name="carousel" />

</InstallationTabsContent> </InstallationTabs>

Anatomy

<CodeBlock filename="anatomy" language="tsx" code={`import { Carousel } from "@/components/ui/carousel";

<Carousel.Bleed> <Carousel.Root totalItems={3} gap={16} variant="inset" align="center"> <Carousel.Viewport> <Carousel.Content> <Carousel.Item index={0}> <div>Item 1</div> </Carousel.Item> <Carousel.Item index={1}> <div>Item 2</div> </Carousel.Item> <Carousel.Item index={2}> <div>Item 3</div> </Carousel.Item> </Carousel.Content> </Carousel.Viewport> <Carousel.Navigation /> </Carousel.Root> </Carousel.Bleed> `} />

Props

Root

The main carousel component that manages state and provides context.

<PropTable data={[ { prop: "totalItems", type: "number", required: true, description: "Total number of items in the carousel", }, { prop: "gap", type: "number", default: "16", description: "Gap between carousel items in pixels", }, { prop: "variant", type: '"default" | "inset"', default: '"default"', description: "Carousel variant. Use 'inset' to align with parent container bounds", }, { prop: "align", type: '"start" | "center"', default: '"start"', description: "Alignment of carousel content", }, { prop: "index", type: "number", description: "Controlled index value", }, { prop: "defaultIndex", type: "number", default: "0", description: "Default index for uncontrolled mode", }, { prop: "onIndexChange", type: "function", description: "Callback when index changes", }, { prop: "className", type: "string", description: "Additional CSS classes to apply to the carousel container", }, ]} />

Bleed

Wrapper that extends carousel to full viewport width.

<PropTable data={[ { prop: "className", type: "string", description: "Additional CSS classes to apply to the bleed container", }, ]} />

Viewport

Scrollable viewport container with hidden scrollbars.

<PropTable data={[ { prop: "className", type: "string", description: "Additional CSS classes to apply to the viewport", }, ]} />

Content

Flex container for horizontal layout with pseudo elements for spacing.

<PropTable data={[ { prop: "className", type: "string", description: "Additional CSS classes to apply to the content container", }, ]} />

Item

<PropTable data={[ { prop: "index", type: "number", required: true, description: "The index of the item in the carousel", }, { prop: "className", type: "string", description: "Additional CSS classes to apply to the item", }, ]} />

Navigation

Container for navigation buttons with default Previous/Next rendering.

<PropTable data={[ { prop: "className", type: "string", description: "Additional CSS classes to apply to the navigation container", }, { prop: "children", type: "ReactNode", description: "Custom navigation buttons (defaults to Previous and Next)", }, ]} />

Previous

Previous button that auto-disables at start.

<PropTable data={[ { prop: "className", type: "string", description: "Additional CSS classes to apply to the previous button", }, { prop: "children", type: "ReactNode", description: "Custom content for the previous button (defaults to left arrow icon)", }, ]} />

Next

Next button that auto-disables at end.

<PropTable data={[ { prop: "className", type: "string", description: "Additional CSS classes to apply to the next button", }, { prop: "children", type: "ReactNode", description: "Custom content for the next button (defaults to right arrow icon)", }, ]} />

Indicators

Dot indicators for each item (hidden when only one item).

<PropTable data={[ { prop: "className", type: "string", description: "Additional CSS classes to apply to the indicators container", }, ]} />

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