Carousel
shadcn/uiA carousel with motion and swipe built using Embla.
Carousel
1
2
3
4
5
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/optics/carousel";import { Card, CardContent } from "@/components/optics/card";<Carousel className="w-full max-w-xs"> <CarouselContent> <CarouselItem> <div className="p-1"> <Card> <CardContent className="flex aspect-square items-center justify-center p-6"> <span className="text-4xl font-semibold"> 1 </span> </CardContent> </Card> </div> </CarouselItem> <CarouselItem> <div className="p-1"> <Card> <CardContent className="flex aspect-square items-center justify-center p-6"> <span className="text-4xl font-semibold"> 2 </span> </CardContent> </Card> </div> </CarouselItem> <CarouselItem> <div className="p-1"> <Card> <CardContent className="flex aspect-square items-center justify-center p-6"> <span className="text-4xl font-semibold"> 3 </span> </CardContent> </Card> </div> </CarouselItem> <CarouselItem> <div className="p-1"> <Card> <CardContent className="flex aspect-square items-center justify-center p-6"> <span className="text-4xl font-semibold"> 4 </span> </CardContent> </Card> </div> </CarouselItem> <CarouselItem> <div className="p-1"> <Card> <CardContent className="flex aspect-square items-center justify-center p-6"> <span className="text-4xl font-semibold"> 5 </span> </CardContent> </Card> </div> </CarouselItem> </CarouselContent> <CarouselPrevious /> <CarouselNext /></Carousel>import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/optics/carousel";import { Card, CardContent } from "@/components/optics/card";<Carousel className="w-full max-w-xs"> <CarouselContent> <CarouselItem> <div className="p-1"> <Card> <CardContent className="flex aspect-square items-center justify-center p-6"> <span className="text-4xl font-semibold"> 1 </span> </CardContent> </Card> </div> </CarouselItem> <CarouselItem> <div className="p-1"> <Card> <CardContent className="flex aspect-square items-center justify-center p-6"> <span className="text-4xl font-semibold"> 2 </span> </CardContent> </Card> </div> </CarouselItem> <CarouselItem> <div className="p-1"> <Card> <CardContent className="flex aspect-square items-center justify-center p-6"> <span className="text-4xl font-semibold"> 3 </span> </CardContent> </Card> </div> </CarouselItem> <CarouselItem> <div className="p-1"> <Card> <CardContent className="flex aspect-square items-center justify-center p-6"> <span className="text-4xl font-semibold"> 4 </span> </CardContent> </Card> </div> </CarouselItem> <CarouselItem> <div className="p-1"> <Card> <CardContent className="flex aspect-square items-center justify-center p-6"> <span className="text-4xl font-semibold"> 5 </span> </CardContent> </Card> </div> </CarouselItem> </CarouselContent> <CarouselPrevious /> <CarouselNext /></Carousel>Installation
pnpm dlx shadcn@latest add @optics/carousel
Props
<Carousel />
Name | Type | |
|---|---|---|
orientation | string(default: horizontal) | |
opts | object(default: { ... }) | |
setApi | string(default: undefined) | |
plugins | string(default: []) |
<CarouselPrevious />
Name | Type | |
|---|---|---|
variant | string(default: outline) |
<CarouselNext />
Name | Type | |
|---|---|---|
variant | string(default: outline) |