Search for a command to run...
A grouped surface for related content. Composes `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, and `CardFooter` to compose anything from a small status card to a full settings panel.
Card| Prop | Type | Default | Description |
|---|---|---|---|
size | "default" | "sm" | "default" | Tightens internal padding and gap. Use "sm" for compact list-row cards. |
CardHeader — top section. Place CardTitle, CardDescription, and (optional) CardAction inside.CardTitle — primary heading, text-base font-medium.CardDescription — supporting line, text-sm text-fg-mid.CardAction — top-right action slot inside CardHeader (e.g. a kebab menu).CardContent — the body. Anything that isn't a header or footer goes here.CardFooter — bottom section. Typically holds the buttons.Keep CardTitle short — one line. If a card needs a long heading, that's usually two cards.
Use size="sm" when the card sits inside a list or grid. The default Card is meant to anchor
a screen.
Right-align footer buttons with className="justify-end gap-2" and put the primary action last.
Prefer size="lg" on CardFooter buttons so the commit action has weight against the card
body.
Nest cards inside cards. If a section needs its own surface, it's probably a separate screen or a tab.
Use CardHeader without a CardTitle. If there's no title, drop the header and start with
CardContent.
Style cards with bespoke shadows, rings, or elevation. The card is intentionally flat — a single
border-loud hairline on surface-primary — so cards read as containers, not floating panels.