Card de métrica com número grande animado (count-up ao entrar no viewport), rótulo e ícone opcional. Usa font-mono e tabular-nums. Respeita prefers-reduced-motion.
Importação
import { MetricCard } from "@zexon/ui/blocks/metric-card";Uso
Exemplo
+0
Lojas ativas
0%
Uptime
Props
| Prop | Tipo | Predefinição | Notas |
|---|---|---|---|
value | number | — | Obrigatório. Número final |
label | string | — | Obrigatório. Texto descritivo |
prefix | string | — | Antes do número (ex.: +, R$) |
suffix | string | — | Após o número (ex.: %, ms) |
icon | ReactNode | — | Ícone ao lado do label |
durationMs | number | 1500 | Duração do count-up |
className | string | — | No wrapper raiz |
Anterior:
Próximo: