Cardshadcn
Groups content about one thing.
Data display- Install
- npx shadcn add card
- Import from
- @/components/ui/card
- Guidance
- draft · v0.1.0
Examples
As installed from shadcn – rendering in jsp-ds tokens through the bridge.
UX audit
A fixed-price review of one product.
Two weeks, a prioritised report and a walkthrough call.
Home – desktop
Updated 2 hours ago
In review
4 open comments · 2 of 3 sign-offs
Guidance
When to use
- To group content and actions about one thing – a project, a plan, a person – usually in a grid or list of like items.
When not to use
- As a generic box around any content – use a Section or a Panel-style surface.
- Inside another card.
Rules
CardTitlenames the thing;CardDescriptionadds one line of context.CardActionholds one small control or status in the header's corner.- If the whole card is a link, link the title and stretch its hit area – don't nest other controls inside a linked card.
Spec
The variables this component reads, and the jsp-ds token behind each, resolved live. Switch mode to see them change.
| Token | CSS variable | Value now |
|---|---|---|
| color.surface.default | --card | … |
| color.text.default | --card-foreground | … |
| color.border.subtle | --border | … |
| radius.xlshadcn's card radius | --radius-xl | … |
Install
Terminal
npx shadcn add cardImport
import { Card } from "@/components/ui/card"From shadcn’s own registry. Don’t edit the installed file – jsp-ds styles it through the bridge, and fixes go in styles/overrides.css with an issue.