Carousel
A horizontal sequence with previous and next controls.
Upstream documentationExamples
Loading preview…
Installation
Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.
Install Carousel
pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/carousel.json'Usage
A complete example using the installed component and hook paths.
Carousel usage
"use client";import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";function CarouselPreview() { return ( <Carousel className="w-full max-w-xs" aria-label="Example slides"> <CarouselContent> {["First", "Second", "Third"].map((label) => ( <CarouselItem key={label}> <div className="flex h-24 items-center justify-center rounded-lg border bg-card text-xl font-medium"> {label} </div> </CarouselItem> ))} </CarouselContent> <div className="mt-4 flex justify-center gap-2"> <CarouselPrevious className="static translate-y-0" /> <CarouselNext className="static translate-y-0" /> </div> </Carousel> );}export default function Demo() { return <CarouselPreview />;}API Reference
Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.
CarouselApi
Exported type.
Carousel
Carousel props
React.ComponentProps<"div"> & CarouselProps- orientation
- "horizontal"
CarouselContent
CarouselContent props
React.ComponentProps<"div">CarouselItem
CarouselItem props
React.ComponentProps<"div">CarouselPrevious
CarouselPrevious props
React.ComponentProps<typeof Button>- variant
- "outline"
- size
- "icon-sm"
CarouselNext
CarouselNext props
React.ComponentProps<typeof Button>- variant
- "outline"
- size
- "icon-sm"
useCarousel
Re-exported primitive; see the upstream API reference.