Card
A list of cards components
Card - Preview
Installation
npm installUsage
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card";
export function MyComponent() {
return (
<Card className="w-[350px]">
<CardHeader>
<CardTitle>Create project</CardTitle>
<CardDescription>Deploy your new project in one-click.</CardDescription>
</CardHeader>
<CardContent>
<form>
<div className="grid w-full items-center gap-4">
<div className="flex flex-col space-y-1.5">
<label htmlFor="name">Name</label>
<input id="name" placeholder="Name of your project" />
</div>
</div>
</form>
</CardContent>
<CardFooter className="flex justify-between">
<button variant="outline">Cancel</button>
<button>Deploy</button>
</CardFooter>
</Card>
);
}Props
| Component | Props | Type | Default | Description |
|---|---|---|---|---|
Card | className | string | - | Additional CSS classes |
CardHeader | className | string | - | Additional CSS classes |
CardTitle | className | string | - | Additional CSS classes |
CardDescription | className | string | - | Additional CSS classes |
CardContent | className | string | - | Additional CSS classes |
CardFooter | className | string | - | Additional CSS classes |
Dependencies
This component has no external dependencies.
Card - Portfolio
Bharat Panigrahi
Frontend Developer
Open to Work
Frontend
Backend
DevOps
Card - Project
To complete
Revamp the design of the website
Milestones
Dark Mode
2d
Components
5d left
Documentation
7d left
Card - Chat
Design Team
3 members • 2 online
Card - Fitness
Today's Progress
Activity
420cal
35min
10hrs
Today's Goals
Card - Home
Living Room
22.5°C
Main Light
80%
AC
22°C
Scenes
Card - Schedule
Schedule
Today, December 14
Design Review
10:00 AM
5
Team Sync
2:30 PM
8
Product Planning
4:00 PM
12
Card - Checkout
Order Summary
1 itemsPremium Plan
Qty: 1 × $99.99
$99.99
Subtotal$99.99
Tax$8.00
Discount (WELCOME10)-$10.00
Total$97.99
Card - Booking
Dental Consultation
WAITING
123 Healthcare Ave, Medical Center
Sarah Johnson
sarah.j@example.com
Position
#3in queue
Estimated Wait
25min
09:30
10/5/2025
Card - Tweet
Dorian Baffier
@dorian_baffier · 2h ago
Just launched X UI! Check out the documentation and let me know what you think 🎨
X UI Documentation
A comprehensive guide to X UI
