Card
A bordered container for related content.
Overview
Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, and CardFooter are layout wrappers. size="sm" only tightens spacing. CardAction sits at the top right of the header.
Preview
Developer. Building accessible UI that you install as source.
Status · Available for collaboration
Installation
Add the component with the CLI. It copies the files in and installs anything they depend on.
npx vinyaas add cardUsage
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
export function Note() {
return (
<Card>
<CardHeader>
<CardTitle>Release notes</CardTitle>
<CardDescription>What shipped in v1.0.0.</CardDescription>
</CardHeader>
<CardContent>
<p>Each component still installs on its own.</p>
</CardContent>
</Card>
);
}Examples
Profile
A person card with a verified badge, a three-dot menu in CardAction, and follow actions.
Product designer. Building accessible UI that you install as source.
Subscription
Plan price, an active badge, and a destructive cancel action.
$24 / month. Renews on October 12.
Account settings
A real settings form: labelled fields, a switch, a checkbox, help text, and save.
Update the name and email on your profile.
We send receipts to this address.
Activity
A feed scrolls inside the card. Each row uses an avatar, a marker, and a time badge.
Updates from the last day.
Security
A switch, a checkbox, and a status badge for account protection.
Notification
An avatar, a status badge, a timestamp, and a follow-up action.
Commented 2 minutes ago
Compact
size="sm" tightens the card. Footer actions stay the same small button size.
The v1.0.0 registry is the production catalog.
In practice
A project summary card with status, progress, an actions menu, and a primary view action.
Updated 2 hours ago by John Doe.
API
Other attributes for the underlying element are passed through.
| Name | Type | Default | Description |
|---|---|---|---|
size | "default" | "sm" | "default" | Card spacing only. sm uses tighter padding and gap. |
className | string | — | Merged with cn on Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, and CardFooter. |
Accessibility
Card does not add a role. Controls inside the card keep their own names through Label, Button, or visible text. A three-dot menu trigger needs an accessible name.