About
Carousel component with Embla, supporting horizontal, vertical, and loop modes.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Interfaces Carousel to your project and fits it to your theme.
Code
How Interfaces Carousel is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import {
Carousel,
CarouselContent,
CarouselItem,
CarouselNext,
CarouselPrevious,
} from "@/components/ui/interfaces-carousel"
export default function CarouselVerticalDemo() {
return (
<div className="flex w-full min-h-screen items-center justify-center overflow-hidden bg-background p-8">
<Carousel orientation="vertical" className="w-full max-w-xs sm:max-w-sm">
<CarouselContent className="h-72">
{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>
)
}