Home

Card

A white surface with rounded corners and a soft shadow that holds one subject.

ui.cardcomponents/ui/card.tsx

Use case

For the AI

Use a card for one thing read at a glance: a dashboard figure (what is outstanding across live invoices), a client's summary, a booking with Confirm and Move It. CardHeader carries the title, a muted line and an optional CardAction at the right (a menu button); CardPanel holds the body; CardFooter holds the buttons. Several related panels under one heading are a Frame instead.

Use it when

  • A figure on a dashboard with its title and its change
  • One record's summary on its page
  • A short task with its buttons (book, confirm)
  • A block of settings that stands alone

Use something else when

  • Several panels grouped under one quiet heading: Frame
  • Many records compared by the same columns: Table
  • A message about a condition on the page: Alert
  • Content that opens over the page to be filled in: Dialog

Examples

Outstanding
Across 3 live invoices

$58,834.75

+1,204.60 · 2.1% this week

Book the studio
Thursday, 10:00 to 12:00

Code

Import

import { MoreHorizontalIcon } from "@/components/icons"
import { Button } from "@/components/ui/button"
import { Card, CardAction, CardDescription, CardHeader, CardPanel, CardTitle } from "@/components/ui/card"

Usage

export function OutstandingCard() {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-[15px] font-medium">Outstanding</CardTitle>
        <CardDescription className="text-[13px] text-ink-4">Across 3 live invoices</CardDescription>
        <CardAction>
          <Button size="icon-sm" variant="ghost" aria-label="More">
            <MoreHorizontalIcon />
          </Button>
        </CardAction>
      </CardHeader>
      <CardPanel>
        <p className="text-[30px] font-medium tracking-[-0.02em] tabular-nums">$58,834.75</p>
        <p className="mt-1 text-[12.5px] text-success-foreground tabular-nums">+1,204.60, 2.1% this week</p>
      </CardPanel>
    </Card>
  )
}

Rules

  • Parts in order: CardHeader (CardTitle, CardDescription, CardAction), then CardPanel, then CardFooter. Leave out what is not needed; the spacing adjusts to the parts present.
  • CardAction holds one control, usually an icon button with an aria-label.
  • Figures in a card are tabular-nums.
  • Footer buttons go secondary first, primary last.
  • CardPanel is also exported as CardContent; it is the same part.