Dashboard

Stat card

A single metric with its label and change. Two variants: the bordered card and a bare form for stat rows.

Available

Ports as-is

All variants

Every variant this component declares, rendered together in one frame from its maintained Storybook story. Lantern stores only the story id and embeds Storybook rather than duplicating the component or its demo.

Stat card

Rendered live from Storybook

Open

Storybook must be running for this to load — bun run start:storybook from the monorepo root, or set NEXT_PUBLIC_STORYBOOK_URL to a deployed instance.

Props

The component's public API, read from its TypeScript source. Descriptions come from TSDoc on the prop, so this table cannot drift from the component.

Prop	Type	Default	Description
`label`*	`string`	—	Metric name, e.g. "Active members".
`value`*	`string`	—	Pre-formatted display value — the card never formats numbers itself.
`change`	`number`	—	Period-over-period change as a percentage. Positive renders green with a leading "+", negative renders red with a leading "−", `0` renders neutral. Omit to hide the delta entirely.
`showMenu`	`boolean`	`true`	Show the overflow menu affordance in the top-right.
`className`	`string`	—	Undocumented — add TSDoc to the prop in the library.
`variant`	`"card" \| "bare"`	`"card"`	`card` draws the surface + border; `bare` is for embedding inside another panel.
`labelHelp`	`string`	—	When set, the label becomes a `MetricTitle` with this text as its tooltip — how the metric is calculated, in plain language.
`onMenuClick`	`() => void`	—	Fired when the overflow menu button is pressed.
`menuLabel`	`string`	`"Metric options"`	Accessible name for the overflow menu button.
`menuSlot`	`ReactNode`	—	Replaces the default overflow button with arbitrary trigger markup (a `DropdownMenu` trigger, a filter `Select`, …). Only used when `showMenu`.
`children`	`ReactNode`	—	Optional content rendered beneath the value row — the slot the dashboard charts use to drop a sparkline into the card.

Reference

Transcribed from the component audit. If this disagrees with the source, the source is right.

Source: src/components/dashboard/StatCard.tsx
Portability: Copies across unchanged — only the utils import path moves.
Notes: Its delta colours are hard-coded literals rather than --success / --destructive. Reproduced as-is; worth fixing in the library.