Stat Card

La tarjeta de KPI de cualquier tablero: cifra grande con contador, variacion contra el periodo anterior, tendencia opcional y tile de icono. Existe para que nadie la vuelva a escribir a mano.

npx orbitui-cli add stat-card

Ingresos

$152.314

vs. período anterior16.2%

Pedidos

25.162

vs. período anterior20.4%

Clientes nuevos

3.847

vs. período anterior8.1%

Devoluciones

$4.209

vs. período anterior2.4%

Sesiones esta semana

31.600

Últimos 7 días6.3%

Plan actual

Pro

3.600 de 5.000 mensajes usados

Props

Prop	Tipo	Descripción
`label`*	`string`	—
`value`*	`number \| string`	—
`formatValue`	`(value: number) => string`	Formateador de la cifra. Solo se usa cuando `value` es numerico.
`delta`	`number`	Variacion porcentual contra el periodo anterior.
`invertDelta`	`boolean`	Para metricas donde bajar es bueno: churn, costo, latencia.
`caption`	`string`	Texto al pie, junto a la pastilla de variacion.
`icon`	`ReactNode`	Icono en un tile de color. Recibe un SVG.
`series`	`number`	Indice en la paleta de charts (1-8): tine el tile y el punto indicador.
`children`	`ReactNode`	Contenido libre bajo la cifra: un sparkline, una barra de progreso.
`action`	`ReactNode`	Zona superior derecha: un menu, un tooltip de ayuda.
`className`	`string`	—

Qué instala

Archivo: components/orbit/ui/stat-card.tsx
Componentes: card, chip, cx
Paquetes npm: ninguno

A partir de la instalación el archivo es tuyo: editalo sin miedo. Si volvés a correr add y lo modificaste, el CLI pregunta antes de pisarlo.