Card

Container

Groups related content and actions into a distinct surface.

npx shadcn@latest add card

Default

A card with header, content, and footer regions.

Preview

Live

Card title

Card description shown under the title.

This is the main body of the card. It can hold any content — text, forms, charts.

tsx

1<Card>
2  <CardHeader>
3    <CardTitle>Card title</CardTitle>
4    <CardDescription>Card description shown under the title.</CardDescription>
5  </CardHeader>
6  <CardContent>
7    <p className="text-sm text-muted-foreground">Card content goes here.</p>
8  </CardContent>
9  <CardFooter className="justify-end gap-2">
10    <Button variant="outline" size="sm">Cancel</Button>
11    <Button size="sm">Save</Button>
12  </CardFooter>
13</Card>

Compact

Use the compact size for dense layouts like tables and side panels.

Preview

Live

Compact card

A smaller card for dense interfaces.

Requests12,483

tsx

1<Card size="sm">
2  <CardHeader>
3    <CardTitle>Compact card</CardTitle>
4    <CardDescription>A smaller card for dense interfaces.</CardDescription>
5  </CardHeader>
6  <CardContent>
7    <div className="flex items-center justify-between text-sm">
8      <span className="text-muted-foreground">Requests</span>
9      <span className="font-medium">12,483</span>
10    </div>
11  </CardContent>
12</Card>

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
size	"default" \| "sm"= "default"	Controls the internal spacing of the card.