Carregando…

Stat

Display

KPI stat card with value, label, trend, icon, 5 intents and metric (sparkline) / grid modes.

Metric Card

Unificado

🚧

Demo coming soon

Add a demo component to DEMOS in _showcase.tsx for display/metric-card

Unificado

🚧

Demo coming soon

Add a demo component to DEMOS in _showcase.tsx for display/stats-card

Instalação via CLI

$ npx kikitocn add stat

Interno:

@/lib/utils

Exemplo de uso

StatExample.tsx

import { Stat } from "@/components/ui/cn/stat/Stat";

export function StatExample() {
  return (
    <Stat />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`mode`	`'single' \| 'metric' \| 'grid'`	`'single'`	Valor único (padrão), 'metric' (unidade + sparkline) ou 'grid' (grade de stats)
`unit`	`string`	`undefined`	mode='metric': unidade exibida ao lado do valor
`sparkline`	`number[]`	`undefined`	mode='metric': série de pontos do mini-gráfico
`stats`	`StatItem[]`	`undefined`	mode='grid': lista de stats { label, value, change?, trend?, icon? }
`cols`	`2 \| 3 \| 4`	`3`	mode='grid': número de colunas da grade
`label*`	`string`	—	Rótulo descritivo da métrica
`value*`	`string \| number`	—	Valor principal exibido em destaque
`description`	`string`	`undefined`	Texto secundário de contexto
`trend`	`'up' \| 'down' \| 'neutral'`	`undefined`	Direção da tendência (ícone de seta)
`trendValue`	`string`	`undefined`	Texto da variação (ex: '+12.5%')
`icon`	`ReactNode`	`undefined`	Ícone exibido ao lado do valor
`intent`	`'default' \| 'primary' \| 'success' \| 'warning' \| 'danger'`	`'default'`	Esquema de cor do card
`loading`	`boolean`	`false`	Exibe skeleton de carregamento

Carregando…