KPI Spark Cards

Metric cards with mini SVG spark lines for dashboards — revenue, occupancy, contracts, and trend indicators.

Default

4 KPIs with spark line

Receita Total

+8,3%

R$ 1,24M

Taxa de Ocupação

+2,1%

94,2%

Novos Contratos

+14,3%

Inadimplência

+0,4%

3,2%

import { KpiSparkCards } from "@/components/blocks/kpi-spark-cards";

// Default (dados PropTech)
<KpiSparkCards />

// Customizado:
<KpiSparkCards
  stats={[
    {
      label: "Receita Total",
      value: "R$ 1,24M",
      change: "+8,3%",
      trend: "up",
      sparkData: [820, 932, 901, 934, 1290, 1330, 1240],
    },
    {
      label: "Inadimplência",
      value: "3,2%",
      change: "+0,4%",
      trend: "down",
      sparkData: [2.5, 2.8, 2.6, 3.0, 3.1, 3.2, 3.2],
    },
  ]}
/>

Two columns

2-col grid