StatCard
StatCard forma parte del apartado «Patterns» del kit. Composiciones listas para usar: KPIs, perfiles, precios, eventos, posts y más.
Instalación#
bash
pnpm add @tsukira/uiUso#
tsx
import { StatCard } from "@tsukira/ui"; export function Ejemplo() { return <StatCard />;}Ejemplos#
Los ejemplos detallados de StatCard están en camino. Mientras tanto, su demo interactiva vive en la página del grupo.
Ver demo en PatternsAPI#
StatCardPropsextends HTMLAttributes<HTMLDivElement>| Prop | Tipo | Default | Descripción |
|---|---|---|---|
label* | ReactNode | — | Etiqueta corta (eyebrow). |
value* | ReactNode | — | Valor principal (texto/número). |
delta | string | — | Indicador de cambio (ej. "+12.8%"). Su signo decide el color. |
tone | 'brand' | 'success' | 'warning' | 'danger' | 'info' | 'ink' | — | Sobrescribe el tono del icono y del delta. |
icon | ReactNode | — | Icono opcional (pintilla en esquina). |
solid | boolean | — | Mostrar como “solid” (fondo de tono). |