component

Playing cards

Four-color playing cards: full-size cards, mini cards, hole cards and a five-slot board.

https://www.pokerstudy.ai/r/playing-card.json

♥A

♦K

♠Q

♥J

♣2

Installation

$ npx shadcn@latest add https://www.pokerstudy.ai/r/playing-card.json

Usage

import { Board, HoleCards } from "@/components/pokerstudy/playing-card";

export function Hand() {
  return (
    <div className="flex items-center gap-4">
      <HoleCards cards={["Ah", "Kd"]} />
      <Board cards={["Qs", "Jh", "2c"]} />
    </div>
  );
}

Examples

Hold'em

♥A

♦K

Omaha

♥A

♦K

♠Q

♣J

Flop

♠Q

♥J

♣2

Four suits

♠A

♥K

♦10

♣2

Mini cards

AK104

Props

Generated from the component source with react-docgen-typescript. Suit colors, corner radius, and the felt behind the preview follow the theme switcher in the header.

PlayingCard

Prop	Type	Default	Description
card	string \| null	–	Rank and suit, such as "Ah" or "Td". Pass null for an empty slot.
className	string	""	Extra classes on the card box.
size	"xs" \| "sm" \| "md" \| "lg"	md	Draw size. Defaults to md.

MiniCard

Prop	Type	Default	Description
card *	string	–	Rank and suit, such as "Ah" or "Td".
className	string	h-8 w-6 text-base	Box and font size. Defaults to a row-sized tile.

HoleCards

Prop	Type	Default	Description
cards *	string[] \| null	–	Hole cards. Null or an empty list renders two empty slots.
size	"xs" \| "sm" \| "md" \| "lg"	md	Draw size before Omaha hands shrink one step to fit. Defaults to md.

Board

Prop	Type	Default	Description
cards *	string[]	–	Up to five board cards. Missing streets render as empty slots.
size	"xs" \| "sm" \| "md" \| "lg"	md	Draw size for every slot. Defaults to md.

import { Board, HoleCards } from "@/components/pokerstudy/playing-card"; export function Hand() { return ( <div className="flex items-center gap-4"> <HoleCards cards={["Ah", "Kd"]} /> <Board cards={["Qs", "Jh", "2c"]} /> </div> ); }