Components
Loading preview...
Carousel component with Embla, supporting horizontal, vertical, and loop modes.
npx shadcn@latest add https://21st.dev/r/jshguo/interfaces-carouselimport {
Carousel,
CarouselContent,
CarouselItem,
CarouselNext,
CarouselPrevious,
} from "@/components/ui/interfaces-carousel"
export default function CarouselDemo() {
return (
<div className="flex w-full min-h-screen items-center justify-center overflow-hidden bg-background p-8">
<Carousel orientation="horizontal" className="w-full max-w-xs sm:max-w-sm md:max-w-md">
<CarouselContent className="h-68">
{Array.from({ length: 5 }).map((_, index) => (
<CarouselItem key={index}>
<div className="bg-card text-card-foreground flex flex-col rounded-xl border shadow-sm">
<div className="flex h-64 aspect-video w-full items-center justify-center p-4">
<span className="text-4xl font-semibold">
{index + 1}
</span>
</div>
</div>
</CarouselItem>
))}
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
</div>
)
}