Card

Import from @workspace/bridge-react/card/card-display.

CardDisplay

Displays a bridge card as a suit icon followed by the formatted rank. Uses useBridgeEngine().notation internally for variant-specific formatting.

Cards are represented as two-character strings: suit letter (S, H, D, C) followed by rank (A, K, Q, J, T, 9–2).

import { CardDisplay } from '@workspace/bridge-react/card/card-display';

<CardDisplay card="SA" />  {/* Ace of Spades */}
<CardDisplay card="HK" />  {/* King of Hearts */}
<CardDisplay card="D7" />  {/* 7 of Diamonds */}

Demo

Props