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.
Small
Set size to sm on Card for tighter vertical padding and gaps — good for compact widgets.
Storage
8.2 GB of 15 GB used
Custom spacing
Override the default gap-8 on Card and the header gap with class props to tune the space between sections.
Notifications
Pick what you want to be notified about.
Edge to edge
Drop the horizontal padding with px-0 so a list or image runs flush to the card edges; each row adds its own inset.
Team members
Invite up to 5 people on the free plan.
Image header
A leading media block as the first child sits flush to the top and sides; the card clips it with overflow-hidden.
Mountain retreat
A quiet cabin above the clouds.
Two nights, breakfast included. Free cancellation up to 24 hours before check-in.
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
Anatomy
Import all parts and piece them together.
<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>