Skip to content
prfct.dev

Card

Stable

A raised surface that groups related content and actions about a single subject.

SourceRegistry
Storage
36.2 GB of 50 GB used
x

Anatomy

Team seats
8 of 10 seats in use
x
  1. 1ContainerA raised surface with a hairline border that holds one subject. Its size sets the padding and the gaps between parts.
  2. 2FooterActions for the whole card, on a quiet band below a hairline. It stays at the bottom when cards in a row stretch to equal height.
  3. 3TitleNames the subject. A description below it adds context.
  4. 4ContentThe body — anything, padded to line up with the header and footer.
  5. 5ActionAn optional control in the header's top corner, aligned with the title.

Installation

$ pnpm dlx shadcn@latest add https://www.prfct.dev/r/card.json

Usage

import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
<Card>
  <CardHeader>
    <CardTitle>Storage</CardTitle>
    <CardDescription>36.2 GB of 50 GB used</CardDescription>
  </CardHeader>
  <CardContent>…</CardContent>
  <CardFooter>…</CardFooter>
</Card>

Use the full composition. The parts share one spacing variable, so headers, content and footers line up without extra classes.

Examples

Sizes

default has 24px of padding and 20px between sections. sm tightens both to 16px and 12px for dashboards and dense grids. Every part reads the same --card-spacing variable, so you never have to override padding on individual sections.

Default
24px padding, 20px between sections.
For primary content: forms, summaries, settings groups.
Small
16px padding, 12px between sections.
For dense dashboards and grids of tiles.

With an action

CardAction places controls in the top-right corner of the header and keeps the title and description aligned on the left, however long they get.

Team members
3 of 5 seats used.
MC
Maya Chenmaya@northwind.dev
Owner
JO
Jonah Okaforjonah@northwind.dev
Admin
LP
Lena Parklena@northwind.dev
Member

Stat

Cards are the natural home for key figures. Keep the label small and quiet, the value large, and state the comparison period next to any change.

Monthly revenue
$48,210+12.4%
vs. last month
Active users
8,924+3.1%
vs. last month
Churn rate
1.8%+0.3 pt
vs. last month

Pricing

Team
For product teams shipping every week.
Most popular

$24per seat / month

  • Unlimited projects
  • Up to 20 collaborators
  • Audit log and SSO
  • Priority support, 4h response

Settings

A bordered header and the tinted CardFooter strip frame a group of settings. The footer is where the card's commit action lives — separated from the controls it saves.

Notifications
Choose what we email you about.

When a production deploy succeeds or fails.

When someone mentions you in a review.

A Monday summary of usage and spend.

Changes apply to all projects.

With media

Place an <img> as the first child and the card removes its top padding and rounds the image to its corners. Decorative covers get an empty alt.

ConferenceHybrid
Systems & Craft 2026
Two days on design systems, tokens and the craft of interface engineering.
October 14–15, 2026Kraków and online

Guidelines

When to use

  • To group content and actions about one subject — a project, a plan, a metric, a settings section.
  • To present a collection of peer objects in a grid, where each can be scanned and compared.

When not to use

  • To add visual separation to a single block of content on a page — use spacing or a Separator.
  • For rows of homogeneous data — use a Table or a list of Items.
  • For content that needs attention right now — use an Alert or a Dialog.

One subject, one card

Revenue
$48,210
Users
8,924
Do.Each card holds one subject; the page layout does the grouping.
Revenue
$48,210
Don’t.Cards nested in cards stack borders and shadows until nothing reads as raised.

Actions

  • Put the card's primary action in the CardFooter, aligned to the end. Secondary actions go before it.
  • Put object-level actions — Edit, Share, an overflow menu — in CardAction.
  • If the whole card navigates, make the title the link and stretch its hit area over the card, instead of wrapping interactive children inside a link.

Elevation

Cards sit at the raised level: a hairline border plus a whisper of shadow in light mode, border only in dark mode. Don't add larger shadows to make a card stand out — emphasis comes from content and position, not depth. Floating shadows belong to popovers and dialogs.

Accessibility

  • Give it a heading when it's a section. CardTitle renders a <div> so it fits any document outline. When cards are major sections of a page, put a heading of the right level inside it — <CardTitle><h3>Storage</h3></CardTitle> — and it inherits the title style.
  • Keep reading order logical. CardAction is placed visually in the corner but comes after the title and description in the DOM, so screen readers hear what the card is before what you can do with it.
  • Media needs alternatives. Informative images need alt text; decorative ones need alt="" or aria-hidden.

API reference

Card

A <div> with the raised surface, border and shared spacing.

PropTypeDefault
size

Padding and gap between sections: 24/20px or 16/12px.

"default" | "sm""default"

CardHeader

A grid that lays out the title, description and an optional CardAction. Add className="border-b" to separate it from the content; its bottom padding follows automatically.

CardTitle

The card's title, set in heading-sm (heading-xs in small cards).

CardDescription

Supporting text under the title in muted-foreground.

CardAction

Controls pinned to the top-right corner of the header, spanning the title and description rows.

CardContent

The main content, padded horizontally to match the header.

CardFooter

A tinted strip separated by a border, for the card's actions and status. It removes the card's bottom padding so the tint reaches the edge.