Sparkline Card

Compact metric card with a large value, delta percentage, and an SVG sparkline with a tone-colored stroke and faint area fill.

Active users+6.8%

4,821

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

Import & use

import { Dashboard2 } from "@/components/beste/piece/dashboard2";

<Dashboard2
  label="Active users"
  value="4,821"
  delta="+6.8%"
  values={[
    22,
    28,
    24,
    33,
    31,
    40,
    38,
    46,
    44,
    52,
    58,
    64
  ]}
  tone="violet"
/>