Card
Container component with elevated styling for grouping related content. Includes sub-components (CardHeader, CardTitle, CardDescription, CardContent, CardFooter) for structured layouts with consistent spacing and typography.
Live Preview
Basic
Basic Card
Simple card with header, content, and footer
Card Title
This is a description that provides context about the card content.
Main content goes here. Cards are great for organizing related information into visual sections.
Minimal Card
Card with only header and content
Simple Card
A card with minimal content for simple use cases.
Content Only Card
Card with content only, no header or footer
Card with content only, no header or footer needed.
Grid
Card Grid
Multiple cards displayed in a responsive grid
Quick Start
Get up and running in minutes
Start building with our pre-configured templates.
Team Collaboration
Work together seamlessly
Invite team members and collaborate in real-time.
Goal Tracking
Monitor your progress
Set objectives and track your achievements.
Features
Pricing Card
Feature-rich card for pricing tiers
Premium Plan
Best for growing teams who need advanced features
- ✓ Unlimited projects
- ✓ Advanced analytics
- ✓ Priority support
- ✓ Custom integrations
Usage Guidance
✓ When to Use
Use for content grouping: product cards, profile cards, feature sections, form containers, list items, dashboard widgets. Essential for organizing information into visual sections.
✗ When NOT to Use
Don't use for full-page layouts (use proper layout components), modals (use Dialog), inline content (use div), or navigation (use nav elements).
Props
classNamestylechildrenonClickonChange