MetricCard
MetricCard 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 { MetricCard } from "@tsukira/ui"; export function Ejemplo() { return <MetricCard />;}Ejemplos#
Los ejemplos detallados de MetricCard están en camino. Mientras tanto, su demo interactiva vive en la página del grupo.
Ver demo en PatternsAPI#
MetricCardPropsextends HTMLAttributes<HTMLDivElement>| Prop | Tipo | Default | Descripción |
|---|---|---|---|
label* | ReactNode | — | — |
value* | ReactNode | — | — |
delta | string | — | Delta con signo: "+12.8%" / "-3.2%" |
hint | ReactNode | — | Texto auxiliar (ej. "vs mes pasado"). |
series | number[] | — | Serie para la sparkline (sin sparkline si vacío). |
tone | SparklineTone | — | Tono de la sparkline + delta. |
icon | ReactNode | — | Icono opcional arriba derecha. |
chartVariant | 'inline' | 'bleed' | — | Cómo se muestra el gráfico: - `inline`: bajo el contenido, con su propio espacio (default). - `bleed`: ocupa el fondo de la card a sangre completa, el texto encima. |