StatCard

Card de métrica para dashboards. API 100% JSON. Formatea números automáticamente (1000 → 1K, 1000000 → 1M) y muestra tendencia con indicador de color.

pnpm dlx nuvo-ui add stat-card

Ejemplo base

Ingresos totales

125.0K

12.5%vs mes anterior

Usuarios activos

8.4K

3.2%vs mes anterior

Tasa de rebote

42.3%

1.8%vs mes anterior

Tickets abiertos

sin cambios

<StatCard
  title="Ingresos totales"
  value={125000}        // se muestra como "125.0K"
  change={12.5}         // porcentaje de cambio
  changeLabel="vs mes anterior"
  trend="up"            // "up" | "down" | "neutral"
/>

<StatCard
  title="Tasa de rebote"
  value="42.3%"         // string = no se formatea
  change={1.8}
  trend="down"
  formatValue={false}
/>

Con icono

Ventas del mes

98.5K

8.1%

Nuevos usuarios

1.2K

22.4%

import { DollarSign } from "lucide-react"  // o cualquier ícono

<StatCard
  title="Ventas del mes"
  value={98500}
  change={8.1}
  trend="up"
  icon={DollarSign}
/>

Props

Prop	Tipo	Default	Descripción
title	string	—	Etiqueta de la métrica
value	number \| string	—	Valor principal a mostrar
change	number	—	Porcentaje de cambio
changeLabel	string	—	Texto adicional junto al cambio
trend	"up" \| "down" \| "neutral"	"neutral"	Determina el color e ícono del cambio
icon	ElementType	—	Componente de ícono (lucide, heroicons, etc.)
formatValue	boolean	true	Si es false, muestra el valor sin formatear