Carregando…

Metric Card

Display

KPI card with value, unit, trend indicator and optional mini sparkline.

🚧

Demo coming soon

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

Instalação via CLI

$ npx kikitocn add metric-card

Exemplo de uso

Metric CardExample.tsx

import { MetricCard } from "@/components/ui/cn/metric-card/MetricCard";

export function MetricCardExample() {
  return (
    <MetricCard />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`label*`	`string`	—	Label da métrica
`value*`	`string \| number`	—	Valor principal
`unit`	`string`	—	Unidade (%, $, etc.)
`trend`	`'up' \| 'down' \| 'neutral'`	—	Direção da tendência
`trendValue`	`string`	—	Valor da variação (ex: '+12%')
`trendLabel`	`string`	—	Período da variação (ex: 'vs last month')
`sparkline`	`number[]`	—	Dados para o mini gráfico
`intent`	`'primary' \| 'success' \| 'warning' \| 'danger' \| 'neutral'`	—	Cor do intent
`loading`	`boolean`	`false`	Exibir skeleton
`description`	`string`	—	Texto descritivo extra
`className`	`string`	—	Classes CSS extras

Carregando…