Card
A container with separate header, content, and footer slots. Useful for dashboard stats, list items, or any block that needs a visual boundary.
Anatomy
Import all parts and piece them together.
vue
<script setup>
import {
Card,
CardAction,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card";
</script>
<template>
<Card>
<CardHeader>
<CardTitle />
<CardDescription />
<CardAction />
</CardHeader>
<CardContent />
<CardFooter />
</Card>
</template>Default
Header with title and description, body in CardContent.
Create project
Deploy your new project in one click.
Pick a framework and a region. You can change either later from settings.
Card grid
Common dashboard pattern: a row of stats cards in a responsive grid with gap-x-2 gap-y-6.
Total revenue
$45,231
+20% from last month
Subscriptions
2,350
+180 this week
Sales
12,234
+19% from last month
Active now
573
+201 since last hour
API Reference
Props, events, and slots for each sub-component.
Card
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| class | string | — | Extra classes. Defaults already include rounded-xl, border, and bg-card. |
CardHeader
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| class | string | — | Top container for title, description, and optional action. |
CardTitle / CardDescription
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| class | string | — | Title is font-semibold tracking-tighter. Description uses text-muted-foreground. |
CardContent / CardFooter
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| class | string | — | Body and action area. Padding is preset. |
CardAction
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| class | string | — | Placed inside CardHeader; grid-positions an action (button, menu) to the top-right. |