Components
- Activity Heatmap
- Activity Rings
- Bar Chart
- Bar List
- Command Palette
- Composed Chart
- Corner Frame
- Data Table
- Delta Badge
- Distribution Bar
- Donut Chart
- Dot Plot
- Funnel Chart
- Heatmap Chart
- KPI Card
- Metric List
- Metric Value
- Period Tabs
- Radar Chart
- Radial Gauge
- Sankey Chart
- Scatter Chart
- Segmented Meter
- Sparkline
- Tick Bar
- Timeline
- Trend Chart
Blocks
- Activity Rings Card
- Allocation Card
- Balance Chart Card
- Breakdown Card
- Commerce KPI Row
- Contributions Card
- Data Table Card
- Distribution Card
- Dot Plot Card
- Dual Metric Card
- Funnel Chart Card
- Goal Chart Card
- Heatmap Chart Card
- Insight Card
- KPI Row Card
- Metric Tabs Chart Card
- Payment Summary Card
- Period Bar Chart Card
- Progress Card
- Revenue Ring Card
- Ring KPI Card
- Score Gauge Card
- Stage Bars Card
- Status Gauge Card
- Tick KPI Card
Orders
2,865+18.0%
Response time
135 ms+14.0%
Revenue
$8,670.00+15.0%
Users
1,425+15.0%
Refunds
42-6.0%
import { MetricList } from "@/components/ui/metric-list"
const items = [Compact rows of label, sparkline, value, and delta, for listing several metrics in the space of one card. It uses the same formatting and delta conventions as the KPI card.
Installation#
pnpm dlx shadcn@latest add @dashboardcn/metric-listAlso installs tooltip from shadcn/ui if missing.
Usage#
import { MetricList } from "@/components/ui/metric-list"
<MetricList
items={[
{ label: "Orders", value: 2865, delta: 0.18, trend: [12, 14, 13, 18, 22, 26] },
{ label: "Refunds", value: 42, delta: -0.06, invertDelta: true, trend: [50, 48, 51, 46, 42] },
]}
/>Your dashboard, your code.
Every component is copied into your project with the shadcn CLI. No package to upgrade, nothing to override.