Patterns · Application UI
Stat Card
A compact metric tile displaying a labeled value with an optional icon, delta trend pill, and muted hint line.
Feature showcase
Installation
Features
6 examples
Default, Delta Directions, Grid Dashboard, No Delta, Rich Value, With Icons.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | - | Short text label shown above the value. |
| value | React.ReactNode | - | The primary metric value displayed prominently. |
| hint | React.ReactNode | undefined | Optional muted helper text shown below the value. |
| delta | { value: string; direction: 'up' | 'down' | 'flat' } | undefined | Optional trend pill showing directional change alongside the value. |
| icon | Icon | undefined | Optional Phosphor icon rendered in the top-right corner of the card. |
| className | string | undefined | Additional CSS classes merged onto the card root element. |
Source and related
| File | Path |
|---|---|
| Component | registry/components/stat-card.tsx |
| Default example | content/examples/stat-card/default.tsx |
| Delta Directions example | content/examples/stat-card/delta-directions.tsx |
| Grid Dashboard example | content/examples/stat-card/grid-dashboard.tsx |
| No Delta example | content/examples/stat-card/no-delta.tsx |
| Rich Value example | content/examples/stat-card/rich-value.tsx |
| With Icons example | content/examples/stat-card/with-icons.tsx |