KPI
A key performance indicator card displaying a metric value with trend chip, sparkline chart, and contextual details.
Usage
Anatomy
Import the KPI component and access all parts using dot notation.
KPI is a subpath-only import (@heroui-pro/react/kpi) because it renders an inline chart and depends on the optional recharts peer. It is not exported from the package root, so SSR apps that don't use it never need recharts installed.
import {KPI} from "@heroui-pro/react/kpi";
<KPI>
<KPI.Header />
<KPI.Icon />
<KPI.Title />
<KPI.Value />
<KPI.Trend />
<KPI.Progress />
<KPI.Chart />
<KPI.Content />
<KPI.Separator />
<KPI.Actions />
<KPI.Footer />
</KPI>With Actions
With Chart Bottom
With Chart Inline
With Chart Tooltip
Pass an <AreaChart.Tooltip> element to KPI.Chart via the tooltip prop to reveal the datapoint behind the line on hover.
With Footer
With Icon
With Progress
CSS Classes
Base Classes
.kpi- Base card shell with flex column layout and padding
Element Classes
.kpi__header- Top row for icon, title, and actions.kpi__content- Grid layout container for value and trend side by side.kpi__icon- Status-tinted icon container.kpi__actions- Absolutely positioned action button area.kpi__title- Metric label text (dtelement).kpi__value- Large formatted number (ddelement).kpi__trend- Inline trend badge (wraps TrendChip).kpi__progress- Full-width progress bar area.kpi__chart- Sparkline container with edge-fade mask.kpi__separator- Edge-to-edge divider.kpi__footer- Bottom section
Data Attributes
[data-status="success"]/[data-status="warning"]/[data-status="danger"]on.kpi__icon- Status color tinting
CSS Variables
--kpi-chart-fade- Edge fade width for the sparkline mask (default:10%)
API Reference
KPI
The root component. Wraps HeroUI Card.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | KPI sub-components |
Also supports all HeroUI Card props.
KPI.Header
Top row container for icon, title, and actions.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Icon, Title, and Actions elements |
Also supports all native div HTML attributes.
KPI.Content
Grid layout container placing value and trend side by side.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Value, Trend, Progress, etc. |
Also supports all native div HTML attributes.
KPI.Icon
Status-tinted icon container.
| Prop | Type | Default | Description |
|---|---|---|---|
status | 'success' | 'warning' | 'danger' | - | Status color for icon background tinting |
children | ReactNode | - | Icon element |
Also supports all native div HTML attributes.
KPI.Title
Metric label rendered as a dt element.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Title text |
Also supports all native dt HTML attributes.
KPI.Value
Large formatted number display. Wraps NumberValue with a dd element for semantics.
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | - | Required. The numeric value to format |
children | ((formatted: string) => ReactNode) | - | Optional render function receiving the formatted string |
Also supports all NumberValue props except children.
KPI.Trend
Inline trend badge. Wraps TrendChip.
Also supports all TrendChip props.
KPI.Progress
Full-width progress bar.
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | - | Required. Progress value from 0 to 100 |
status | 'success' | 'warning' | 'danger' | 'success' | Status color for the progress bar |
Also supports all native div HTML attributes.
KPI.Actions
Action button (three-dot icon by default). Wraps HeroUI Button as a ghost icon-only button.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Custom icon replacing the default three-dot icon |
Also supports all HeroUI Button props.
KPI.Chart
Sparkline area chart using Recharts.
| Prop | Type | Default | Description |
|---|---|---|---|
data | Record<string, number | string>[] | - | Required. Chart data array |
dataKey | string | 'value' | Key in each data object to use as the Y value |
color | string | 'currentColor' | Stroke/line color |
fillColor | string | - | Fill color for the area gradient. Defaults to color at 20% opacity |
height | number | 80 | Chart height in pixels |
strokeWidth | number | 2 | Stroke width |
tooltip | ReactNode | - | A tooltip element rendered inside the chart, e.g. <AreaChart.Tooltip content={...} /> |
Also supports all native div HTML attributes.
KPI.Separator
Edge-to-edge divider. Wraps HeroUI Separator.
Also supports all HeroUI Separator props.
KPI.Footer
Bottom section for additional details or links.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Footer content |
Also supports all native div HTML attributes.