Card Swap
A layouts card swap component
Card 1
Card 2
Card 3
import CardSwap, { Card } from "@/components/vritti/card-swap";
export function CardSwapExample() {
return (
<div className="relative flex h-[400px] w-full items-center justify-center overflow-hidden rounded-lg border">
<CardSwap>
<Card className="flex items-center justify-center bg-blue-500 text-white">Card 1</Card>
<Card className="flex items-center justify-center bg-green-500 text-white">Card 2</Card>
<Card className="flex items-center justify-center bg-red-500 text-white">Card 3</Card>
</CardSwap>
</div>
);
}
Installation
pnpm dlx shadcn@latest add "https://vritti.thesatyajit.com/r/card-swap"
Dependencies
pnpm add gsap