StatCards
Grid responsivo de cards de métricas/KPIs com valor em destaque, ícone e tendência opcional.
Carregando...
Instalação
npx @kobana/ui add stat-cardsDependências instaladas automaticamente: card (shadcn/ui), lucide-react
Importação
import { StatCards } from "@/components/kobana/stat-cards"Props
StatCards
| Prop | Tipo | Default | Descrição |
|---|---|---|---|
items | StatCardItem[] | — | Lista de métricas a serem exibidas |
columns | number | responsivo (1/2/4) | Número fixo de colunas no breakpoint maior (1 a 6) |
className | string | — | Classes adicionais aplicadas ao container do grid |
StatCardItem
| Prop | Tipo | Descrição |
|---|---|---|
label | string | Rótulo da métrica (título pequeno) |
value | React.ReactNode | Valor principal em destaque (já formatado) |
icon | React.ReactNode | Ícone opcional exibido ao lado do rótulo |
hint | string | Texto auxiliar opcional exibido abaixo do valor |
trend | StatCardTrend | Tendência opcional (variação) exibida abaixo do valor |
StatCardTrend
| Prop | Tipo | Descrição |
|---|---|---|
value | string | Texto da tendência (ex: "+12%") |
direction | "up" | "down" | "neutral" | Direção: colore o indicador (verde/vermelho/neutro) e escolhe o ícone |
Uso
import { DollarSign, Users } from "lucide-react"
import { StatCards } from "@/components/kobana/stat-cards"
<StatCards
items={[
{
label: "Receita Total",
value: "R$ 45.231,89",
icon: <DollarSign />,
trend: { value: "+20,1% vs. mês anterior", direction: "up" },
},
{
label: "Clientes Ativos",
value: "2.350",
icon: <Users />,
trend: { value: "+180 este mês", direction: "up" },
},
]}
/>O componente é totalmente genérico: o value aceita qualquer nó React (texto, número formatado, badge, etc.), então a formatação fica a cargo de quem consome. Use columns para fixar o número de colunas no breakpoint maior ou deixe em branco para o grid responsivo padrão.