# Pick a Card

> A stunning, fully interactive playing card deck component built with React and CSS animations. This component showcases modern web design techniques including 3D transforms, glassmorphism effects, and smooth animations.  Key Features 13 Unique Cards: Complete with custom designs and card statistics 3D Flip Animation: Hover to reveal detailed card information Advanced Filtering: Sort by Red, Black, or Green cards Deck Management: Stack and unstack cards with smooth animations Shuffle Effect: Realistic card shuffling with random positioning Responsive Design: Optimized for both desktop and mobile devices Modern Styling: Gradient backgrounds, shadows, and glassmorphism effects Technical Highlights Pure CSS animations with no external animation libraries Transform-style preserve-3d for realistic card flipping Backdrop-filter for modern blur effects Custom CSS variables for dynamic animations Responsive flexbox layout Optimized performance with CSS transitions Use Cases Card game interfaces Interactive portfolios Gaming applications Educational tools UI component libraries Design system showcases This component demonstrates advanced CSS techniques and modern React patterns, making it perfect for developers looking to implement sophisticated card-based interfaces.

- Author: [Dhileep Kumar GM](https://21st.dev/@dhileepkumargm)
- License: unknown
- Live preview: https://21st.dev/@dhileepkumargm/components/pick-a-card

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/dhileepkumargm/pick-a-card?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt