Carousel
Slides you swipe or step through with round arrow buttons, built on Embla.
@cupertinoui/carouselRegistry JSON import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel"
const slides = [
{ title: "Liquid Glass", from: "#8ec5fc", to: "#e0c3fc" },
{ title: "Spotlight", from: "#f6d365", to: "#fda085" },
{ title: "Continuity", from: "#84fab0", to: "#8fd3f4" },
{ title: "Live Activities", from: "#fccb90", to: "#d57eeb" },
]
export default function CarouselDemo() {
return (
<Carousel className="w-full max-w-xs">
<CarouselContent>
{slides.map((slide) => (
<CarouselItem key={slide.title}>
<div
className="flex aspect-[4/3] items-end rounded-[16px] p-4 text-[17px] font-semibold text-white shadow-[inset_0_0_0_1px_rgb(0_0_0/0.06)]"
style={{ background: `linear-gradient(135deg, ${slide.from}, ${slide.to})` }}
>
{slide.title}
</div>
</CarouselItem>
))}
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
)
}Installation
pnpm dlx shadcn@latest add @cupertinoui/carouselThe first install also adds the macOS theme. See Installation to set up the registry.
Usage
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel"
<Carousel>
<CarouselContent>
<CarouselItem>…</CarouselItem>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>API Reference
Every part forwards the props of the underlying element. The props below are the ones CupertinoUI adds or changes.
Carousel
| Prop | Type | Description |
|---|---|---|
orientation | "horizontal" | "vertical"Default: "horizontal" | The direction of the slides. |
opts / plugins | | Embla's options and plugins. |
setApi | (api) => void | Gets Embla's API, e.g. to show the current slide. |
className | string | Extra classes, merged with the component's own. |