PlaysetCard
The core card component with themes, effects, and sizing options.
Usage
my-card.tsxtsx
1import { PlaysetCard } from "@/components/playset-card"2import { Sparkles } from 'lucide-react'3 4export function MyCard() {5 return (6 <PlaysetCard7 title="Dragon"8 category="CREATURE"9 theme="orange"10 effect="holographic"11 size="md"12 headerIcon={<Sparkles className="w-4 h-4" />}13 >14 <div className="text-center">15 <p>Custom card content</p>16 </div>17 </PlaysetCard>18 )19}Sizes
Cards come in five sizes: xs,sm,md,lg, andxl.
Card
SIZE
Card
SIZE
Card
SIZE
Card
SIZE
Effects
Apply special visual effects to make cards stand out. Effects work best in dark mode but are also visible in light mode.
Basic
EFFECT
Foil
EFFECT
Holographic
EFFECT
Polychrome
EFFECT
Negative
EFFECT
Gold
EFFECT
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title* | string | — | Card title text displayed in the header |
| category | string | — | Category label displayed at the bottom of the card |
| theme | "red" | "orange" | "gold" | "green" | "teal" | "cyan" | "blue" | "purple" | "gray" | "purple" | Color theme preset for the card |
| effect | "none" | "foil" | "holographic" | "polychrome" | "negative" | "gold" | "none" | Special visual effect applied to the card |
| size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Card size preset |
| headerIcon | ReactNode | — | Icon displayed in the header next to the title |
| isActive | boolean | false | Whether the card shows an active glow state |
| isFaceDown | boolean | false | Whether the card is displayed face-down |
| children | ReactNode | — | Custom content to render inside the card body |