Card

A bordered surface that groups related content and actions.

Default

mrkdwn

Encrypted publishing for writers and developers.

Write in markdown, publish encrypted. Drafts stay on your machine until you decide otherwise.

<Card className="w-full max-w-sm">
  <CardHeader>
    <CardTitle>mrkdwn</CardTitle>
    <CardDescription>Encrypted publishing for writers and developers.</CardDescription>
  </CardHeader>
  <CardContent>…</CardContent>
  <CardFooter>
    <Button size="sm">Start writing</Button>
  </CardFooter>
</Card>

Hover

buena mono

A monospace typeface for writing and code.

<Card className="transition-shadow hover:shadow-md">…</Card>

The card ships with a border and shadow by default (Geist border + shadow); hoverable adds the lift on pointer.

Dividers

Draft

Published

Archived

1.2k words

14 notes

3 tags

Left: borderBetween divides stacked children with horizontal rules. Right: borderBetween with direction="row" uses vertical rules.

Secondary

Studio plan

The muted, secondary card treatment.

Image

Introducing buena mono

Read the release notes for 1.216.

Media sits flush above the header. shadcn size scales the card's padding and gap, and spacing tunes the gap between header, content, and footer.

Markdown for agents: /design/card.md · spec: /design.md