Card

Group related content in a quiet, bounded surface.

Preview

Teams want less setup, visible sources, and a clear way to review each draft.

Installation

Install

npx shadcn@latest add https://ghost-ui.com/r/card.json

Card has no component dependency. Examples that show an action also import Button.

Basic usage

12345678import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";

<Card.Root>
<Card.Header><Card.Title>Research brief</Card.Title><Card.Description>Three interview patterns.</Card.Description></Card.Header>
<Card.Content>Teams want visible sources and a clear review step.</Card.Content>
<Card.Footer><span>Updated today</span><Card.Action><Button>Open brief</Button></Card.Action></Card.Footer>
</Card.Root>

Structures

Examples

Outline

Use a boundary to separate a brief from nearby content.

Teams want less setup, visible sources, and a clear way to review each draft.

Subtle

Use a quiet fill when the surrounding view already supplies structure.

Teams want less setup, visible sources, and a clear way to review each draft.

Ghost

Keep content open when the parent layout supplies separation.

Teams want less setup, visible sources, and a clear way to review each draft.

Compact

Reduce containment spacing without changing content typography.

Teams want less setup, visible sources, and a clear way to review each draft.

Media

Lead with a visual summary of the brief.

Teams want less setup, visible sources, and a clear way to review each draft.

Horizontal

Place media and its title beside each other when width permits.

Teams want less setup, visible sources, and a clear way to review each draft.

Link

Navigate with a native anchor; keep independent buttons outside linked roots.

Teams want less setup, visible sources, and a clear way to review each draft.

Overflow

Keep long source titles and descriptions inside the available width.

The review brings together customer needs, open questions, and the evidence behind the next planning decision.

API reference

Card.Root properties
Prop	Type	Default	Description
`variant`	`"outline" \| "subtle" \| "ghost"`	`"outline"`	Selects the surface treatment.
`density`	`"default" \| "compact"`	`"default"`	Sets container padding and part spacing independently of variant.
`render`	`Base UI useRender render prop`		Renders a native article, anchor, or composed element; native div is the default.
`ref / native props / className / style`	`React div props`		Forwarded to the root element.

Card parts
Prop	Type	Description
`Header`	`div`	Optional heading region. Place Title and Description directly inside Header; an optional Action occupies the trailing column.
`Title`	`h2`	Heading content. Change the rendered heading level when the page hierarchy requires it.
`Description`	`p`	Supporting text.
`Content`	`div`	Main caller-owned content.
`Footer`	`div`	Optional metadata or actions.
`Action`	`div`	Aligns a caller-owned action.

Card

Preview

A clearer starting point

Installation

Basic usage

Structures

Examples

Outline

A clearer starting point

Subtle

A clearer starting point

Ghost

A clearer starting point

Compact

A clearer starting point

Media

A clearer starting point

Horizontal

A clearer starting point

Link

A clearer starting point

Overflow

Customer interview synthesis for the shared research workspace — research-2026-customer-interviews-final-review

API reference