Card
Each example below is a real component instance — flip the theme toggle to see how it adapts.
Default#
Loading…
Interactive#
Click me
Cards become interactive when an onClick handler is set.
Stats#
Loading…
As Link#
Loading…
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| title | ReactNode | — | Render a header row with this title (and optional `actions`). |
| description | ReactNode | — | Description shown under the title (or above children when no title). |
| actions | ReactNode | — | Action slot rendered to the right of the title. |
| footer | ReactNode | — | Footer slot rendered with a top divider beneath children. |
| onActivate | (() => void) | undefined | — | Keyboard activation handler. When provided, Enter/Space on a card with `role="button"` (i.e. `interactive` truthy) calls this instead of synthesizing a fake mouse event for `onClick` — downstream `e.button` / `e.clientX` reads from the synthesized event are `undefined`, so prefer `onActivate` when you need an intent-only callback. |
| variant | "ghost" | "default" | "elevated" | null | undefined | — | |
| interactive | boolean | null | undefined | — |