Card
A container with header, content, and footer sections. Includes dashboard and metric card variants.
Installation
Usage
import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter } from "@/components/ui/card"Examples
Default
Choose which notifications you'd like to receive and how they're delivered.
With Header Border
Add border-b to CardHeader to separate the header from content.
Choose which notifications you'd like to receive and how they're delivered.
With Form
Card wrapping form inputs: shows Card, Input, and Button working together.
With Action
CardAction places a control in the top-right of the header.
Jane Doe
jane@example.com
Alex Smith
alex@example.com
With Rows
CardRow creates a bordered list layout for settings or navigation.
Notifications
Push and email alerts
Security
Password and 2FA
Language
English (US)
Compact Header
DashboardCardHeader + MetricCardValue for data display cards.
Table Header
CardTableHeader adds column labels that align with grid rows below.