Sparkline Row

Stacked rows combining a label, value, inline tone-colored sparkline, and emerald delta on the right.

Signups382

+12%

Revenue$18.4K

+6%

MAU9.8K

+3%

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

Import & use

import { Dashboard30 } from "@/components/beste/piece/dashboard30";

<Dashboard30
  rows={[
    {
      "label": "Signups",
      "value": "382",
      "delta": "+12%",
      "values": [
        14,
        18,
        16,
        22,
        24,
        28,
        32
      ]
    },
    {
      "label": "Revenue",
      "value": "$18.4K",
      "delta": "+6%",
      "values": [
        120,
        132,
        128,
        140,
        152,
        168,
        184
      ]
    },
    {
      "label": "MAU",
      "value": "9.8K",
      "delta": "+3%",
      "values": [
        80,
        82,
        85,
        84,
        88,
        92,
        98
      ]
    }
  ]}
  tone="violet"
/>