Metric Trio

Three horizontally divided metric cells in one card, each with a label, value, and semantic delta arrow.

ARR$1.82M+8.4%

Churn2.1%-0.3%

NPS48+6%

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use

import { Dashboard29 } from "@/components/beste/piece/dashboard29";

<Dashboard29
  metrics={[
    {
      "label": "ARR",
      "value": "$1.82M",
      "delta": 8.4
    },
    {
      "label": "Churn",
      "value": "2.1%",
      "delta": -0.3
    },
    {
      "label": "NPS",
      "value": "48",
      "delta": 6
    }
  ]}
/>