Primitive · CLI
Card
Elevated surface for grouped content - header, body, footer slots.
Preview
npx shadcn@latest add @atroui/cardInstallation
Agent blurb — install command + no npm UI rule. For agents
npx shadcn@latest add @atroui/cardSource lands in your repo. Installation · Registry
Usage
Use Card when a group of content is acted on as a unit - a project, a plan, a record. For static marketing sections, plain layout reads calmer than a boxed surface.
tsx
import {
Card,
CardHeader,
CardTitle,
CardDescription,
CardContent,
CardFooter,
} from "@/components/ui/card"
import { Button } from "@/components/ui/button"
<Card>
<CardHeader>
<CardTitle>Project Alpha</CardTitle>
<CardDescription>Shipped this week</CardDescription>
</CardHeader>
<CardContent>Body copy</CardContent>
<CardFooter>
<Button size="sm">Open</Button>
</CardFooter>
</Card>Header action and footer actions
CardAction pins a control to the top-right of the header - the header switches to a two-column grid on its own. CardFooter already draws the divider and muted band, so it only needs alignment classes.
Compact media
An <img> as the first child goes edge to edge - Card drops its top padding and rounds the image corners for you, so no wrapper is needed. Pair it with size="sm" for grid tiles.
Landscape
Imageory
Nature
Imageory
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| size | 'default' | 'sm' | 'default' | Density. |
| className | string | - | Extra classes (e.g. border-brand/30). |
Card