A key performance indicator card displaying a metric value with trend chip, sparkline chart, and contextual details.
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>Pass an <AreaChart.Tooltip> element to KPI.Chart via the tooltip prop to reveal the datapoint behind the line on hover.
.kpi - Base card shell with flex column layout and padding.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 (dt element).kpi__value - Large formatted number (dd element).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-status="success"] / [data-status="warning"] / [data-status="danger"] on .kpi__icon - Status color tinting--kpi-chart-fade - Edge fade width for the sparkline mask (default: 10%)The root component. Wraps HeroUI Card.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | KPI sub-components |
Also supports all HeroUI Card props.
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.
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.
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.
Metric label rendered as a dt element.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Title text |
Also supports all native dt HTML attributes.
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.
Inline trend badge. Wraps TrendChip.
Also supports all TrendChip props.
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.
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.
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.
Edge-to-edge divider. Wraps HeroUI Separator.
Also supports all HeroUI Separator props.
Bottom section for additional details or links.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Footer content |
Also supports all native div HTML attributes.