Games

Playing Card

A self-contained playing card with face layouts, three sizes, native div props, and an optional custom back image.

Ranks and suits

Face up and face down.

A♠♠A♠

10♦♦10♦

J♥♥J♥

Q♣♣Q♣

The same hand drawn full and simple.

A♠♠A♠

10♦♦10♦

K♥♥K♥

face="full"

A♠♠

10♦♦

K♥♥

face="simple"

Width is a custom property, so the whole card scales with it.

A♠♠A♠

size="sm"

A♠♠A♠

size="base"

A♠♠A♠

size="large"

The same hand twice: the default back, then backImage.

A♠♠A♠

plain back

A♠♠A♠

hidden backImage="/cards/card-back.svg"

pnpm dlx shadcn@latest add https://betui.fyi/r/playing-card.json