Card
Surface with header, content and a tinted footer for actions.
Create project
Deploy a new project in one click.
Installation
$npx shadcn@latest add @reziui/cardUsage
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
export function Example() {
return (
<Card>
<CardHeader>
<CardTitle>Create project</CardTitle>
<CardDescription>Deploy a new project in one click.</CardDescription>
</CardHeader>
<CardContent>…</CardContent>
<CardFooter>
<Button variant="secondary">Cancel</Button>
<Button>Create</Button>
</CardFooter>
</Card>
);
}Examples
Content only
Requests · 24h+12.4%
1,284,031vs 1,142,557 the previous dayEvery part is optional. A card with only CardContent is a padded surface.
API reference
| Component | Notes |
|---|---|
Card | Rounded surface with a 1px ring and a light shadow. |
CardHeader | Stacks CardTitle and CardDescription. |
CardTitle | 16px semibold. |
CardDescription | 13px, muted. |
CardContent | 20px padding. |
CardFooter | Right-aligned actions on a slightly elevated surface with a hairline above. |
All parts forward the native props of their <div>.