Metric Group
Several Metric Cards in one frame, divided by hairlines — the KPI row at the top of a dashboard.
See alsoMetric CardKPI Group
Usage
Installation
Metric Group comes with WunderUI Core and Pro, in the package from your plan. See the plans.
Then import what you need:
import { MetricGroup } from "@wunderui/react"Examples
Three columns
columns={3} for a shorter row; on small screens the cells stack.
With sparklines
Any Metric Card variant works inside the group, here with a sparkline under each value.
Anatomy
The parts the component is made of. Each one renders a you can target from CSS.
- data-slot="metric-group"
The shared frame for a row of Metric Cards, divided by hairlines. Cards drop their own border, radius and shadow. sets 2, 3 or 4 per row at larger widths.
Best practices
- When to use
Use MetricGroup for the KPI row at the top of a dashboard when the cards have trends or charts. For plain stat cards use KPIGroup.
- Do
Set to the card count (2, 3 or 4). At the default 4 it shows 2 columns on medium widths and a single column on phones.
- Do
Give every card the same structure: label, value, trend and caption. Cells with different rows leave uneven gaps in the frame.
- Don’t
Don't give the cards their own borders or shadows. The group strips them, and the hairlines are the gaps showing the border colour.
- Don’t
Don't use it for a single metric. One card needs no frame, so use MetricCard.
API Reference
Theming
The CSS variables this component reads. Set one on any wrapper to restyle everything inside it. More in Theming.