Installation
Usage
import { CardDeck } from "@/components/ui/card-deck"
const images = [
{ src: "/image1.jpg", alt: "Image 1" },
{ src: "/image2.jpg", alt: "Image 2" },
{ src: "/image3.jpg", alt: "Image 3" },
]
export default function Example() {
return <CardDeck images={images} infinite={true} autoplay={true} />
}Examples
Yu-Gi-Oh Card Stack
Here's an example using actual card images without rounded corners:
Balatro Card Deck
Here's an example using Balatro-style card images:
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| images | { src: string; alt: string }[] | - | Array of image objects |
| infinite | boolean | true | Enable infinite loop cycling |
| autoplay | boolean | false | Enable automatic card cycling |
| showPagination | boolean | false | Show pagination dots |
| showNavigation | boolean | false | Show navigation arrows |
| spaceBetween | number | 40 | Space between cards in pixels |
| enableInitialAnimation | boolean | true | Enable entrance animation when component mounts |
| className | string | - | Additional CSS classes |