Card
Basic Cards
Simple card layouts with different content types.
Simple Card
This is a basic card with minimal content and clean styling.
Highlighted Card
This card has a colored border to draw attention.
Gradient Card
This card features a subtle gradient background.
Profile Cards
Cards designed for displaying user profiles and information.
John Doe
Software Engineer
Passionate developer with 5+ years of experience in React and TypeScript.
Alice Smith
UX Designer
Content Cards
Cards for articles, blog posts, and media content.
Getting Started with React Components
Learn how to build reusable and maintainable React components with modern best practices and TypeScript.
Weekly Newsletter
Stay updated with the latest news
Product Cards
E-commerce style cards for products and services.
Wireless Headphones
Premium noise-canceling headphones
Smart Watch
Track your fitness and stay connected
Laptop Stand
Ergonomic aluminum laptop stand
Statistics Cards
Cards for displaying metrics and key performance indicators.
Total Users
12,345
+12% from last month
Page Views
98.2K
+8% from last week
Downloads
1,234
-3% from yesterday
Revenue
$45.2K
+22% from last month
Interactive Cards
Cards with hover effects and click interactions.
Clickable Card
This entire card is clickable and shows hover effects.
Hover Effect Card
This card changes appearance when you hover over it.
Custom Styled Cards
Cards with unique styling and layouts.
Featured Article
This card has a colorful top border to indicate special status.
Premium Feature
This card uses a gradient background to highlight premium content.
| Name | Type | Default | Details |
|---|---|---|---|
| className | string | ' ' | You can customise by passing tailwind classes. |
| children | React.ReactNode | Required | You can pass card content as children. |
| onClick | (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void | Optional | You can get callback when card is clicked. |