### Import Entire Deck for Dynamic Card Rendering

Source: https://context7.com/letele/playing-cards/llms.txt

Import all cards as a deck object to dynamically render cards based on runtime values. This is useful for games where card selection is determined programmatically.

```jsx
import * as deck from '@letele/playing-cards';

function DynamicCardDisplay({ suit, rank }) {
  // Build component name from suit and rank
  // suit: 'H', 'D', 'C', 'S'
  // rank: 'a', '2'-'10', 'j', 'q', 'k'
  const cardName = `${suit}${rank}`;
  const Card = deck[cardName];

  if (!Card) {
    return <div>Invalid card: {cardName}</div>;
  }

  return (
    <div style={{ width: '150px', height: '210px' }}>
      <Card style={{ height: '100%', width: '100%' }} />
    </div>
  );
}

function Blackjack() {
  const playerHand = [
    { suit: 'H', rank: 'a' },
    { suit: 'S', rank: 'k' }
  ];

  return (
    <div style={{ display: 'flex', gap: '8px' }}>
      {playerHand.map((card, index) => (
        <DynamicCardDisplay
          key={index}
          suit={card.suit}
          rank={card.rank}
        />
      ))}
    </div>
  );
}
```

--------------------------------

### Import and Use a Specific Card Component

Source: https://github.com/letele/playing-cards/blob/main/README.md

Import a specific card component (e.g., Sq for Square) and render it. Ensure the container has appropriate styling for the card to fit.

```javascript
import { Sq } from '@letele/playing-cards';

//...

return (
  <div className='card-container'>
    <Sq style={{ height: '100%', width: '100%' }} />
  </div>
);
```

--------------------------------

### Styling Cards with CSS Classes

Source: https://context7.com/letele/playing-cards/llms.txt

Demonstrates how to apply custom CSS classes and inline styles to playing cards for effects like animations and hover states.

```APIDOC
## Styling Cards with CSS Classes

Apply custom CSS classes and inline styles to cards for animations, hover effects, and custom layouts.

```jsx
import { Ha, B1 } from '@letele/playing-cards';
import './cards.css';

function FlippableCard({ faceUp = true }) {
  return (
    <div
      className="card-container"
      style={{
        width: '120px',
        height: '168px',
        perspective: '1000px'
      }}
    >
      <div
        className={`card-inner ${faceUp ? 'face-up' : 'face-down'}`}
        style={{
          position: 'relative',
          width: '100%',
          height: '100%',
          transition: 'transform 0.6s',
          transformStyle: 'preserve-3d'
        }}
      >
        {/* Front - Ace of Hearts */}
        <div style={{ position: 'absolute', width: '100%', height: '100%', backfaceVisibility: 'hidden' }}>
          <Ha
            style={{ height: '100%', width: '100%' }}
            className="playing-card"
          />
        </div>

        {/* Back */}
        <div style={{
          position: 'absolute',
          width: '100%',
          height: '100%',
          backfaceVisibility: 'hidden',
          transform: 'rotateY(180deg)'
        }}>
          <B1
            style={{ height: '100%', width: '100%' }}
            className="playing-card"
          />
        </div>
      </div>
    </div>
  );
}

/* cards.css */
/*
.card-inner.face-down {
  transform: rotateY(180deg);
}

.playing-card {
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
  cursor: pointer;
}

.playing-card:hover {
  filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.4));
}
*/
```
```

--------------------------------

### Import Available Card Components

Source: https://context7.com/letele/playing-cards/llms.txt

Reference for importing specific card components from the library and their supported props.

```jsx
// Hearts (H): Ha, H2, H3, H4, H5, H6, H7, H8, H9, H10, Hj, Hq, Hk
// Diamonds (D): Da, D2, D3, D4, D5, D6, D7, D8, D9, D10, Dj, Dq, Dk
// Clubs (C): Ca, C2, C3, C4, C5, C6, C7, C8, C9, C10, Cj, Cq, Ck
// Spades (S): Sa, S2, S3, S4, S5, S6, S7, S8, S9, S10, Sj, Sq, Sk
// Jokers: J1, J2
// Card Backs: B1, B2

import {
  // Hearts
  Ha, H2, H3, H4, H5, H6, H7, H8, H9, H10, Hj, Hq, Hk,
  // Diamonds
  Da, D2, D3, D4, D5, D6, D7, D8, D9, D10, Dj, Dq, Dk,
  // Clubs
  Ca, C2, C3, C4, C5, C6, C7, C8, C9, C10, Cj, Cq, Ck,
  // Spades
  Sa, S2, S3, S4, S5, S6, S7, S8, S9, S10, Sj, Sq, Sk,
  // Special cards
  J1, J2, B1, B2
} from '@letele/playing-cards';

// Each component accepts these props:
// - style: React CSSProperties for inline styling
// - className: CSS class name for external styling
// - title: Accessibility title for the SVG
// - titleId: ID for the title element (for aria-labelledby)
// - ...props: Any other valid SVG attributes
```

--------------------------------

### Import and Use the Entire Deck Object

Source: https://github.com/letele/playing-cards/blob/main/README.md

Import the entire deck object to access card components dynamically. Use bracket notation to select a specific card (e.g., deck['Sq']).

```javascript
import * as deck from '@letele/playing-cards';

const Card = deck['Sq'];

//...

return (
  <div className='card-container'>
    <Card style={{ height: '100%', width: '100%' }} />
  </div>
);
```

--------------------------------

### Available Card Components Reference

Source: https://context7.com/letele/playing-cards/llms.txt

Provides a comprehensive list of all exported card components and their naming conventions, along with details on accepted props.

```APIDOC
## Available Card Components Reference

Complete list of all 56 exported card components with their naming convention.

```jsx
// Hearts (H): Ha, H2, H3, H4, H5, H6, H7, H8, H9, H10, Hj, Hq, Hk
// Diamonds (D): Da, D2, D3, D4, D5, D6, D7, D8, D9, D10, Dj, Dq, Dk
// Clubs (C): Ca, C2, C3, C4, C5, C6, C7, C8, C9, C10, Cj, Cq, Ck
// Spades (S): Sa, S2, S3, S4, S5, S6, S7, S8, S9, S10, Sj, Sq, Sk
// Jokers: J1, J2
// Card Backs: B1, B2

import {
  // Hearts
  Ha, H2, H3, H4, H5, H6, H7, H8, H9, H10, Hj, Hq, Hk,
  // Diamonds
  Da, D2, D3, D4, D5, D6, D7, D8, D9, D10, Dj, Dq, Dk,
  // Clubs
  Ca, C2, C3, C4, C5, C6, C7, C8, C9, C10, Cj, Cq, Ck,
  // Spades
  Sa, S2, S3, S4, S5, S6, S7, S8, S9, S10, Sj, Sq, Sk,
  // Special cards
  J1, J2, B1, B2
} from '@letele/playing-cards';

// Each component accepts these props:
// - style: React CSSProperties for inline styling
// - className: CSS class name for external styling
// - title: Accessibility title for the SVG
// - titleId: ID for the title element (for aria-labelledby)
// - ...props: Any other valid SVG attributes
```
```

--------------------------------

### Render a Complete Deck of Playing Cards

Source: https://context7.com/letele/playing-cards/llms.txt

Iterate through all suits and ranks to render a full 52-card deck plus jokers and card backs. Useful for visualizing the entire set of cards.

```jsx
import * as deck from '@letele/playing-cards';

function FullDeck() {
  const suits = ['H', 'D', 'C', 'S'];
  const ranks = ['a', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'j', 'q', 'k'];
  const specials = ['J1', 'J2', 'B1', 'B2'];

  const cardContainerStyle = {
    width: '60px',
    height: '84px',
    display: 'inline-block',
    margin: '2px'
  };

  const cardStyle = { height: '100%', width: '100%' };

  return (
    <div>
      {/* Standard 52 cards */}
      {suits.map(suit => (
        <div key={suit} style={{ marginBottom: '10px' }}>
          {ranks.map(rank => {
            const cardName = `${suit}${rank}`;
            const Card = deck[cardName];
            return (
              <div key={cardName} style={cardContainerStyle}>
                <Card style={cardStyle} />
              </div>
            );
          })}
        </div>
      ))}

      {/* Jokers and Card Backs */}
      <div>
        {specials.map(name => {
          const Card = deck[name];
          return (
            <div key={name} style={cardContainerStyle}>
              <Card style={cardStyle} />
            </div>
          );
        })}
      </div>
    </div>
  );
}
```

--------------------------------

### Style Flippable Cards with CSS

Source: https://context7.com/letele/playing-cards/llms.txt

Use CSS classes and inline styles to create a 3D flippable card effect with hover states.

```jsx
import { Ha, B1 } from '@letele/playing-cards';
import './cards.css';

function FlippableCard({ faceUp = true }) {
  return (
    <div
      className="card-container"
      style={{
        width: '120px',
        height: '168px',
        perspective: '1000px'
      }}
    >
      <div
        className={`card-inner ${faceUp ? 'face-up' : 'face-down'}`}
        style={{
          position: 'relative',
          width: '100%',
          height: '100%',
          transition: 'transform 0.6s',
          transformStyle: 'preserve-3d'
        }}
      >
        {/* Front - Ace of Hearts */}
        <div style={{ position: 'absolute', width: '100%', height: '100%', backfaceVisibility: 'hidden' }}>
          <Ha
            style={{ height: '100%', width: '100%' }}
            className="playing-card"
          />
        </div>

        {/* Back */}
        <div style={{
          position: 'absolute',
          width: '100%',
          height: '100%',
          backfaceVisibility: 'hidden',
          transform: 'rotateY(180deg)'
        }}>
          <B1
            style={{ height: '100%', width: '100%' }}
            className="playing-card"
          />
        </div>
      </div>
    </div>
  );
}

/* cards.css */
/*
.card-inner.face-down {
  transform: rotateY(180deg);
}

.playing-card {
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
  cursor: pointer;
}

.playing-card:hover {
  filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.4));
}
*/
```

--------------------------------

### Import Individual Playing Card Components

Source: https://context7.com/letele/playing-cards/llms.txt

Import specific card components directly using their suit and rank naming convention (e.g., Ha for Ace of Hearts). Useful for displaying known cards.

```jsx
import { Ha, Dk, S10, Cq, J1, B1 } from '@letele/playing-cards';

function PokerHand() {
  const cardStyle = { height: '100%', width: '100%' };

  return (
    <div style={{ display: 'flex', gap: '10px' }}>
      {/* Ace of Hearts */}
      <div style={{ width: '100px', height: '140px' }}>
        <Ha style={cardStyle} title="Ace of Hearts" titleId="ace-hearts" />
      </div>

      {/* King of Diamonds */}
      <div style={{ width: '100px', height: '140px' }}>
        <Dk style={cardStyle} title="King of Diamonds" titleId="king-diamonds" />
      </div>

      {/* 10 of Spades */}
      <div style={{ width: '100px', height: '140px' }}>
        <S10 style={cardStyle} title="10 of Spades" titleId="ten-spades" />
      </div>

      {/* Queen of Clubs */}
      <div style={{ width: '100px', height: '140px' }}>
        <Cq style={cardStyle} title="Queen of Clubs" titleId="queen-clubs" />
      </div>

      {/* Joker */}
      <div style={{ width: '100px', height: '140px' }}>
        <J1 style={cardStyle} title="Joker" titleId="joker-1" />
      </div>

      {/* Card Back */}
      <div style={{ width: '100px', height: '140px' }}>
        <B1 style={cardStyle} title="Card Back" titleId="card-back" />
      </div>
    </div>
  );
}
```

--------------------------------

### Set Card Container Dimensions

Source: https://github.com/letele/playing-cards/blob/main/README.md

Ensure the SVG card spans the full height and width of its container by setting the card's style to height: '100%' and width: '100%'. The card container itself has a fixed 5:7 width-to-height ratio.

```javascript
return (
  <div className='card-container'>
    <Card style={{ height: '100%', width: '100%' }} />
  </div>
);
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.