Card

A composable surface for a discrete content object with optional header, content, and footer structure.

Use Card when content represents one object that benefits from a visible boundary or elevation. Use Section for a borderless group of related settings or controls.

Workspace activity

Changes from the last seven days.

Three updates were published during the last seven days.

Updated recently

Structured card

Installation

$npx shadcn@latest add @patchui/card

The copied source is available in the registry JSON. The canonical implementation lives in packages/react/src/components/card.tsx.

Usage

<Card>
  <CardHeader>
    <div>
      <CardTitle>Workspace activity</CardTitle>
      <CardDescription>Changes from the last seven days.</CardDescription>
    </div>
  </CardHeader>
  <CardContent>Three updates were published.</CardContent>
</Card>

Card defaults to variant="outlined". Its structural parts are independent, so omit any slot the content does not need.

Composition

Card
├── CardHeader
│   ├── CardTitle
│   └── CardDescription
├── CardContent
└── CardFooter

Examples

Surface variants

Use outlined for a clear object boundary, surface for quiet grouping, and elevated when an object must sit above surrounding content.

Surface

Outlined

Elevated

Surface variants

Actionable card

actionable adds visual interaction states only. Render the complete Card as a link or button to supply the correct semantics.

Browse resources

Open the complete collection.

Actionable card

API reference

Prop	Type	Default	Description
variant	"surface" \| "outlined" \| "elevated"	"outlined"	Selects quiet, bounded, or elevated presentation.
actionable	boolean	false	Adds hover, active, disabled, and keyboard-focus presentation for a semantic link or button.
selected	boolean	false	Adds selected presentation and data-selected without choosing an ARIA selection model.
render	RenderProp<"div">	-	Changes the semantic root while retaining Card presentation.

All structural parts support render when their semantic element needs to change. CardFooter adds a top boundary with divided.

Accessibility

A plain Card is a visual grouping and does not add landmark semantics automatically.
Choose a CardTitle heading level that fits the surrounding document hierarchy.
When the whole card is interactive, render it as one link or button. Do not nest other interactive controls inside it.
selected is visual state only. Add aria-selected, aria-pressed, or another state required by the parent interaction pattern.
Keep a visible text label when an icon appears in the header or footer as an action.