Card
A container with separate header, content, and footer slots. Useful for dashboard stats, list items, or any block that needs a visual boundary.
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. |