StatCard

Tarjeta de métrica KPI con delta porcentual (▲/▼) y sparkline ASCII [▁▂▃▅▆▇█].

// VISTA PREVIA

> STATCARD KPI TELEMETRY

// THROUGHPUT_RPS ▲ +24.5%

48,920

Prop	Tipo TypeScript	Default	Descripción	Variantes
label (StatCard)	`string`	`undefined`	Etiqueta de métrica de telemetría o KPI (ej. LATENCIA_EDGE).	—
value (StatCard)	`string`	`undefined`	Valor numérico o métrica principal destacada.	—
delta / trend (StatCard)	`string / 'up' \| 'down' \| 'neutral'`	`'+0.0%' / 'up'`	Variación porcentual e indicador direccional ▲/▼/◆.	up down neutral
sparkline (StatCard)	`string`	`'▁▂▃▅▆▇█'`	Micro-gráfica en caracteres de bloque ASCII.	—
text (Tooltip)	`string`	`undefined`	Texto emergente mostrado al enfocar o pasar el cursor.	—
position / variant (Tooltip)	`'top' \| 'bottom' / 'dark' \| 'crimson' \| 'cyan' \| 'gold'`	`'top' / 'dark'`	Ubicación y tema cromático del tooltip.	dark crimson cyan gold

Terminal // Bash BASH

ryukami-ui add stat-card

src/pages/stat-card-demo.astro ASTRO

01 ---

02 import StatCard from '@/components/StatCard.astro';

03 ---

05 <StatCard label="THROUGHPUT_RPS" value="48,920" delta="+24.5%" trend="up" sparkline="▁▂▃▄▆▇█" variant="crimson" />