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

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

None

Foil

EFFECT

foil

Holographic

EFFECT

holographic

Polychrome

EFFECT

polychrome

Negative

EFFECT

negative

Gold

EFFECT

gold

Props

Prop	Type	Default	Description
title	`string`	`"Card Title"`	Card title text displayed in the header
category	`string`	`"CATEGORY"`	Category label displayed at the bottom of the card
theme	`"purple" \| "blue" \| "green" \| "red" \| "orange" \| "pink" \| "cyan" \| "gold" \| "gray"`	`"purple"`	Color theme preset for the card
customTheme	`Partial<CardTheme>`	—	Override theme colors per card (frame, frameBg, cardBg, titleColor, categoryColor)
effect	`"none" \| "foil" \| "holographic" \| "polychrome" \| "negative" \| "gold"`	`"none"`	Special visual effect applied to the card
effectIntensity	`number`	`1`	Multiplier for effect strength. Useful range: 0 to 2.
size	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "auto"`	`"md"`	Card size preset. "auto" sizes to content width.
width	`number \| string`	—	Override card width. Takes precedence over size.
height	`number \| string`	—	Override card height. Takes precedence over size.
contentScale	`number`	`1`	Scale factor applied to the card content area.
headerIcon	`ReactNode`	—	Icon displayed in the header next to the title
isActive	`boolean`	`false`	Whether the card shows an active glow state
viewTransitionName	`string`	—	View Transitions API name for animating between routes/states
children	`ReactNode`	—	Custom content to render inside the card body