DSNiemeyer

KPI Spark Cards

Cards de métricas com mini spark line SVG para dashboards — receita, ocupação, contratos e indicadores de tendência.

Default

4 KPIs com spark line

Receita Total

+8,3%

R$ 1,24M

Taxa de Ocupação

+2,1%

94,2%

Novos Contratos

+14,3%

38

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

2 colunas

Grid 2 cols

Receita Total

+8,3%

R$ 1,24M

Taxa de Ocupação

+2,1%

94,2%

Novos Contratos

+14,3%

38

Inadimplência

+0,4%

3,2%

<KpiSparkCards className="sm:grid-cols-2 lg:grid-cols-2" />