Stat Card
Cartão de indicador (KPI) para dashboards, com valor, variação colorida e mini gráfico opcional.
Visitas ao site
12.847
Alta de+38%vs. mês anterior
'use client';
import { Eye } from 'lucide-react';
import { StatCard } from '@/components/stat-card';
export default function StatCardDemo() {
return (
<StatCard
label="Visitas ao site"
value="12.847"
delta={38}
deltaLabel="vs. mês anterior"
icon={<Eye />}
sparkline={[320, 380, 360, 420, 410, 480, 530, 510, 590, 640, 620, 710]}
className="w-72"
/>
);
}Instalação
npx shadcn@latest add @lenstech/stat-cardUso
import { StatCard } from "@/components/stat-card"<StatCard
label="Leads no mês"
value="184"
delta={22.4}
deltaLabel="vs. mês anterior"
sparkline={[8, 12, 10, 14, 13, 17, 16, 21]}
/>value já vem formatado
O cartão não formata números: passe o texto pronto ("R$ 48.320,00", "3,8%"), por exemplo com
Intl.NumberFormat("pt-BR", …). Já delta é um número (38 vira +38%).
Exemplos
Grade de indicadores
Use de 2 a 6 cartões numa grade responsiva. Varie sparklineColor (tokens chart-1 a chart-5) para diferenciar as séries.
Visitas ao site
12.847
Alta de+38%vs. mês anterior
Leads no mês
184
Alta de+22,4%vs. mês anterior
Taxa de conversão
3,8%
Queda de-0,4%vs. mês anterior
Faturamento
R$ 48.320,00
Alta de+15%vs. mês anterior
'use client';
import { DollarSign, Eye, Percent, Users } from 'lucide-react';
import { StatCard } from '@/components/stat-card';
export default function StatCardGrid() {
return (
<section aria-label="Indicadores do mês" className="grid w-full gap-4 sm:grid-cols-2">
<StatCard
label="Visitas ao site"
value="12.847"
delta={38}
deltaLabel="vs. mês anterior"
icon={<Eye />}
sparkline={[320, 380, 360, 420, 410, 480, 530, 510, 590, 640, 620, 710]}
sparklineColor={1}
/>
<StatCard
label="Leads no mês"
value="184"
delta={22.4}
deltaLabel="vs. mês anterior"
icon={<Users />}
sparkline={[8, 12, 10, 14, 13, 17, 16, 21, 19, 24]}
sparklineColor={2}
/>
<StatCard
label="Taxa de conversão"
value="3,8%"
delta={-0.4}
deltaLabel="vs. mês anterior"
icon={<Percent />}
sparkline={[4.1, 4.3, 4.0, 4.2, 3.9, 3.7, 3.9, 3.8]}
sparklineColor={3}
/>
<StatCard
label="Faturamento"
value="R$ 48.320,00"
delta={15}
deltaLabel="vs. mês anterior"
icon={<DollarSign />}
sparkline={[31, 34, 33, 38, 36, 41, 44, 48]}
sparklineColor={4}
/>
</section>
);
}Queda positiva (invertDelta)
Por padrão, alta é verde e queda é vermelha. Para métricas em que menos é melhor (custo por lead, tempo de resposta, taxa de rejeição), use invertDelta.
Custo por lead
R$ 18,40
Queda de-21%vs. mês anterior
Tempo médio de resposta
2h 15min
Alta de+12%vs. semana anterior
'use client';
import { Clock, DollarSign } from 'lucide-react';
import { StatCard } from '@/components/stat-card';
export default function StatCardInvertDelta() {
return (
<div className="grid w-full gap-4 sm:grid-cols-2">
{/* Custo caiu 21%: com invertDelta, a queda aparece em verde */}
<StatCard
label="Custo por lead"
value="R$ 18,40"
delta={-21}
deltaLabel="vs. mês anterior"
invertDelta
icon={<DollarSign />}
sparkline={[32, 30, 29, 27, 24, 22, 20, 18]}
sparklineColor={3}
/>
{/* Tempo de resposta subiu: com invertDelta, a alta aparece em vermelho */}
<StatCard
label="Tempo médio de resposta"
value="2h 15min"
delta={12}
deltaLabel="vs. semana anterior"
invertDelta
icon={<Clock />}
sparkline={[1.6, 1.8, 1.7, 2.0, 2.1, 2.3, 2.25]}
sparklineColor={5}
/>
</div>
);
}Mínimo
Todas as partes além de label e value são opcionais.
Pedidos hoje
27
Taxa de conversão
3,8%
Alta de+0,6%vs. mês anterior
'use client';
import { Percent } from 'lucide-react';
import { StatCard } from '@/components/stat-card';
export default function StatCardMinimal() {
return (
<div className="grid w-full gap-4 sm:grid-cols-2">
{/* Só rótulo e valor */}
<StatCard label="Pedidos hoje" value="27" />
{/* Com variação, sem gráfico */}
<StatCard label="Taxa de conversão" value="3,8%" delta={0.6} deltaLabel="vs. mês anterior" icon={<Percent />} />
</div>
);
}Quando usar
- Use para destacar os principais números de um painel: visitas, leads, conversão, faturamento.
- Não use para séries detalhadas ou comparações entre muitas categorias — use um gráfico completo.
- Não use mais de 6 cartões lado a lado: se tudo é destaque, nada é.
- Veja o bloco Dashboard para um painel completo.
API
StatCard
Aceita as props de uma <div> HTML, mais:
Prop
Type
Sparkline
O mini gráfico também é exportado para uso isolado: <Sparkline data={[…]} className="text-chart-2" />.
Ele herda a cor de currentColor.