A solid card with a washed header, a lifted highlight tone, and a sunken muted tone.
Card is a solid surface for content that should not show the field through it: summaries, forms, record details. default is a solid card with a washed header; highlight lifts the one block that needs action (white, a crisp brand hairline, a soft lift and a faint top rule); muted is a sunken box for secondary information.
It sets data-surface="solid", so secondary buttons inside become white tiles, and publishes --card-pad and --inner-radius to its content.
Two ways to fill it, rendering identically: props (title, description, actions, footer) or shadcn's parts (CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter). With parts, the children render bare and the parts give the structure.
Installation
npx shadcn@latest add KezLahd/rime/cardAlso installs: base.
Usage
import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui";
<Card title="This month" description="Updated hourly" actions={<Button size="sm" variant="secondary">Export</Button>}>…</Card>Composition
Card
├── CardHeader
│ ├── CardTitle
│ ├── CardDescription
│ └── CardAction
├── CardContent
└── CardFooterExamples
Tones
This month
Updated hourly
Two invoices are overdue
Send a reminder or mark them paid.
Composed from parts
This month
Updated hourly
This month
Updated hourly
API
Generated from the component's TypeScript types and JSDoc (scripts/gen-ui-registry.mjs), so it always matches the source.
Card
| Prop | Type | Default | Description |
|---|---|---|---|
| title | ReactNode | ||
| description | ReactNode | ||
| actions | ReactNode | Right side of the header: buttons, a status pill. | |
| footer | ReactNode | ||
| tone | "default" | "highlight" | "muted" | "default" | default = solid card with a washed header. highlight = lifted white panel with a soft brand top edge, for the one block on a screen that needs the user's action. muted = sunken neutral box for secondary information. |
| padding | "sm" | "md" | "lg" | "md" | |
| as | "div" | "section" | "article" | "aside" | "section" | |
| headingLevel | 2 | 3 | 4 | 3 |
Also accepts the native attributes of AriaAttributes, DOMAttributes, HTMLAttributes.
CardHeader
| Prop | Type | Default | Description |
|---|---|---|---|
Also accepts the native attributes of AriaAttributes, DOMAttributes, HTMLAttributes.
CardContent
| Prop | Type | Default | Description |
|---|---|---|---|
Also accepts the native attributes of AriaAttributes, DOMAttributes, HTMLAttributes.
CardFooter
| Prop | Type | Default | Description |
|---|---|---|---|
Also accepts the native attributes of AriaAttributes, DOMAttributes, HTMLAttributes.
Theme tokens
Per-component tokens are undeclared by default, so the default shown is the fallback the CSS uses. Set one at :root (or in theme.css) to restyle every instance. Live values are read from this page, so they follow the Rime Studio.
| Token | Default | Live value |
|---|---|---|
| --card-bg | var(--surface-solid) | … |
| --card-border | var(--line) | … |
| --card-header-bg | linear-gradient(to right, var(--surface-sunken), var(--surface-sunken-2)) | … |
| --card-pad-lg | calc(24px * var(--density)) | … |
| --card-pad-md | calc(20px * var(--density)) | … |
| --card-pad-sm | calc(14px * var(--density)) | … |
| --card-radius | var(--r-xl) | … |
| --card-shadow | var(--shadow-hairline-card) | … |
System tokens it reads
| Token | Default | Live value |
|---|---|---|
| --border-w | tokens.css | … |
| --density | tokens.css | … |
| --font-body | tokens.css | … |
| --highlight-edge | tokens.css | … |
| --highlight-glow | tokens.css | … |
| --highlight-line | tokens.css | … |
| --ink-heading | tokens.css | … |
| --ink-muted | tokens.css | … |
| --line | tokens.css | … |
| --line-glass | tokens.css | … |
| --line-soft | tokens.css | … |
| --r-2xs | tokens.css | … |
| --r-xl | tokens.css | … |
| --shadow-hairline-card | tokens.css | … |
| --shadow-lift | tokens.css | … |
| --surface-solid | tokens.css | … |
| --surface-sunken | tokens.css | … |
| --surface-sunken-2 | tokens.css | … |
| --text-card-title | tokens.css | … |
| --text-small | tokens.css | … |
Accessibility
- The title renders as h3 by default; set headingLevel to fit the page outline.
Do and don't
Do
- Use highlight once per screen at most.
Don't
- Don't tint a card to make it stand out; lift it (tone="highlight").
For AI agents
This page as markdown, rendered from the same registry entry. Point an agent at it (or add .md to this page's URL), or at /llms.txt for the index.
Open card.md