# Card Component

> Modern Card Component — Beautiful, Accessible, and Fully Responsive This elegant React + Tailwind CSS card component is a powerful UI building block, designed for modern web applications that demand both style and usability. Built with TypeScript, it features smooth animations, responsive layouts, and complete accessibility support — making it ideal for portfolios, dashboards, content showcases, or landing pages.  🚀 Key Features: 💅 Sleek Visuals Minimalist aesthetic with smooth shadows, rounded corners, and interactive hover effects.  📷 Optional Image Section Supports lazy-loaded, responsive images with graceful fallback and zoom-on-hover.  🧠 Smart CTA Button Integrated call-to-action button with keyboard support, hover scaling, and arrow icon animation.  📱 Responsive Layout Adapts seamlessly across mobile, tablet, and desktop viewports.  ♿ Accessibility-First Fully navigable via keyboard with proper ARIA roles and focus indicators.  🛠️ Fully Configurable Accepts props for title, description, imageUrl, buttonText, onClick, and custom styling via className.  🧾 TypeScript Support Type-safe with a well-defined CardProps interface for better developer experience.  📦 What's Included: A reusable Card component  An App component showcasing:  Cards with images  A text-only card  A responsive card grid  A feature section explaining component capabilities  🔧 Use Cases: Blog previews or article summaries  E-learning course tiles  Product highlights  Service offerings in landing pages  Dashboards and portals  Whether you're building a portfolio or launching a product, this component gives you a professional-grade layout with delightful UX, ready to drop into any React project.

- Author: [Sonu](https://21st.dev/@uniquesonu)
- License: unknown
- Live preview: https://21st.dev/@uniquesonu/components/card-component

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/uniquesonu/card-component?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