dashboardcn
1

Metric List

PreviousNext

Compact rows of label, sparkline, value, and delta.

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 = [

Installation

pnpm dlx shadcn@latest add https://dashboardcn.com/r/metric-list.json

Also 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] },
  ]}
/>