Card Title
Card description goes here.
This is the card content area. Place any content here.
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
export const CardDemo = () => (
<Card className="w-full max-w-sm">
<CardHeader>
<CardTitle>Card Title</CardTitle>
<CardDescription>Card description goes here.</CardDescription>
</CardHeader>
<CardContent><p className="text-sm text-muted-foreground">This is the card content area. Place any content here.</p></CardContent>
<CardFooter className="gap-2">
<Button variant="outline" size="sm">Cancel</Button>
<Button size="sm">Save</Button>
</CardFooter>
</Card>
);With Action
Use CardAction inside CardHeader to place a button or badge in the top-right corner. It uses CSS grid to stay aligned regardless of title/description length.
Notifications
You have 3 unread messages.
No new notifications since your last visit.
Header Only
A card without footer — use for informational displays that don't require actions.
Total Revenue
Last 30 days
€ 24,850
+12.5% from last month
With Dividers
Add border-b to CardHeader and border-t to CardFooter for visual separation.
Settings
Manage your account preferences.
Your preferences are saved automatically.
Content Only
Use Card with just CardContent for minimal containers — images, code blocks, or custom layouts.
Custom content area
Props
Card
CardHeader
CardTitle
CardDescription
CardAction
CardContent
CardFooter
Usage
import {
Card,
CardAction,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
// Basic card
<Card>
<CardHeader>
<CardTitle>Title</CardTitle>
<CardDescription>Description</CardDescription>
</CardHeader>
<CardContent>Content</CardContent>
<CardFooter>
<Button>Action</Button>
</CardFooter>
</Card>
// With header action
<Card>
<CardHeader>
<CardTitle>Title</CardTitle>
<CardDescription>Description</CardDescription>
<CardAction>
<Button variant="outline" size="sm">Action</Button>
</CardAction>
</CardHeader>
<CardContent>Content</CardContent>
</Card>
// With dividers
<Card>
<CardHeader className="border-b">
<CardTitle>Title</CardTitle>
</CardHeader>
<CardContent>Content</CardContent>
<CardFooter className="border-t">
<Button>Save</Button>
</CardFooter>
</Card>Specs
# Mint — Card Specs
## Component
- name: card
- file: registry/mint/card.tsx
- installs to: components/ui/card.tsx
- dependencies: none
## What is it
A structural container for grouping related content and actions. Used as
the base for dashboards, forms, settings panels, data summaries, and list
items. Provides consistent padding, border, background, and shadow without
prescribing internal layout.
## Visual identity
Rounded-xl corners, single border, card background (--card), subtle shadow-sm.
Internal layout is a flex-col with gap-6 — sub-components stack naturally.
No internal decoration — cards read clean and minimal.
## Design tokens
--card: oklch(1 0 0) — card background
--card-foreground: oklch(0.145 0 0) — text inside card
--border: oklch(0.88 0.04 155 / 60%) — card border
--muted-foreground: oklch(0.52 0.06 155) — CardDescription text
--radius: 1.25rem (xl = 1.5×base) — card corner radius
--shadow-sm: subtle drop shadow
## Dark theme
--card: oklch(0.205 0 0)
--card-foreground: oklch(0.985 0 0)
--border: oklch(0.32 0.05 155 / 40%)
## Anatomy
<Card> ← flex-col gap-6 rounded-xl border bg-card py-6 shadow-sm
<CardHeader> ← CSS grid: title/description + optional CardAction
<CardTitle> ← font-semibold leading-none
<CardDescription> ← text-sm text-muted-foreground
<CardAction> ← col-start-2 row-span-2, top-right position via grid
<CardContent> ← px-6
<CardFooter> ← flex items-center px-6; border-t activates pt-6
## CardHeader grid
CardHeader uses @container with CSS grid. Without CardAction:
auto single column. With CardAction: [1fr auto] — title/description in
column 1, action in column 2 spanning both rows.
Trigger: has-data-[slot=card-action]:grid-cols-[1fr_auto]
## Divider pattern
- Header divider: <CardHeader className="border-b"> — adds bottom border
- Footer divider: <CardFooter className="border-t"> — adds top border + pt-6
## Conventions
- Always include at least CardHeader or CardContent — empty Card is invalid
- CardAction must be a direct child of CardHeader
- CardFooter gap for buttons: add gap-2 or gap-3 via className
- Do not add padding directly to Card — use CardContent for inner padding
- For clickable cards: wrap in <a> or use asChild pattern on a LinkInstallation
GIN Design Plugin$ npx shadcn add https://gin-design.vercel.app/card