Card
Content container following the Level 1 surface hierarchy
Preview
Project Name
Brief description of this project
Card content goes here. All page content should be inside a Card (Level 1 surface).
Components
Prop
Type
Usage
import {
Card,
CardHeader,
CardTitle,
CardDescription,
CardContent,
CardFooter,
} from "@/components/ui/card"
<Card>
<CardHeader>
<CardTitle>Title</CardTitle>
<CardDescription>Description</CardDescription>
</CardHeader>
<CardContent>Content</CardContent>
<CardFooter>Actions</CardFooter>
</Card>Surface Hierarchy
Cards represent Level 1 in the 3-level surface hierarchy:
| Level | Token | Purpose |
|---|---|---|
| 0 | --background | Page canvas |
| 1 | --card | Content containers (Card) |
| 2 | --muted | Nested elements within cards |
Install
npx shadcn add @bonsai/card