Playset

Hand Display

A fanned card hand component with selection, hover effects, and customizable sizing.

Standard Hand

Click cards to select them. Click outside or press Escape to deselect.

Your Hand

Premium Hand

Legendary cards with special effects like polychrome and gold.

Legendary Cards

Size Variants

Extra Small (xs)

Usage

import { Hand, Playmat } from "@/components/playset-blocks"

const cards = [
  { title: "Fireball", category: "SPELL", theme: "red", icon: <Flame /> },
  { title: "Shield", category: "ARMOR", theme: "blue" },
]

<Playmat label="Your Hand">
  <Hand cards={cards} size="sm" />
</Playmat>