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 <PlaysetCard
7 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
xs
Card
SIZE
sm
Card
SIZE
md
Card
SIZE
lg

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
None
Foil
EFFECT
foil
Holographic
EFFECT
holographic
Polychrome
EFFECT
polychrome
Negative
EFFECT
negative
Gold
EFFECT
gold

Props

PropTypeDefaultDescription
title*stringCard title text displayed in the header
categorystringCategory 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
headerIconReactNodeIcon displayed in the header next to the title
isActivebooleanfalseWhether the card shows an active glow state
isFaceDownbooleanfalseWhether the card is displayed face-down
childrenReactNodeCustom content to render inside the card body