KPI
Três peças para números de painel: Kpi é o card (rótulo, ícone, valor, variação, dica, espaço para gráfico e nota de rodapé), KpiGroup organiza em colunas que se ajustam à largura e KpiDelta é a pílula de variação.
Linha com divisórias
divided junta os KPIs num único card com linhas finas entre eles. As colunas seguem a largura do grupo, não da tela.
Enviados
702Alta de +5,7%vs setembro
Assinados
655Alta de +6,0%vs setembro
Pendentes
47Queda de −12vs setembro
Taxa de conclusão
93,3%Variação de 0,0 p.p.
Com ícone e minigráfico
tone pinta só o ícone; o valor fica na cor do texto. children recebe um gráfico pequeno.
Envios no ano
5.513Alta de +70%jan → out
Assinaturas no ano
5.069Alta de +77%jan → out
Recusas no ano
193Alta de +71%jan → out
Tamanhos e rodapé
size vai de sm a xl. footnote fecha o card com uma linha de contexto.
Signatários ativos
214
Tempo médio
5,2 h
Do envio à última assinatura
Envelopes no mês
702
Conclusão
93%
Composição
Para casos fora do padrão, componha dentro do Kpi: aqui, a meta do mês com barra de progresso e a validade do certificado em chips.
Meta de outubro
655 de 700
Faltam 45 assinaturas em 14 dias.
Certificado da conta
e-CNPJ A1
Válido até 03/2027ICP-Brasil
Renovação automática ligada.
Uso
<KpiGroup columns={4} divided>
<Kpi label="Enviados" value="702" delta={<KpiDelta value="+5,7%" signed />} hint="vs setembro" />
<Kpi label="Assinados" value="655" icon={CheckCircle2} tone="success">
<Sparkline data={…} />
</Kpi>
</KpiGroup>Props
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| Kpi · label · value | string · ReactNode | — | Rótulo e número principal. |
| Kpi · delta · hint | ReactNode | — | Variação (use KpiDelta) e texto de comparação. |
| Kpi · icon · tone | LucideIcon · "neutral" | "primary" | "success" | "warning" | "info" | "danger" | "neutral" | Ícone com fundo no tom. |
| Kpi · size | "sm" | "md" | "lg" | "xl" | "md" | Tamanho do valor. |
| Kpi · footnote · children | ReactNode | — | Nota com divisória e espaço para gráfico ou composição. |
| KpiGroup · columns · divided | 2–6 · boolean | 4 · false | Colunas pela largura do grupo; divided vira um card com divisórias. |
| KpiDelta · value · tone · direction · signed | ReactNode · "success" | "danger" | "neutral" · "up" | "down" · boolean | — | signed tira seta e cor do sinal do valor. |