componente · @solu30/ui-kit/display
MetricCard
El componente, montado
Cargando el espécimen…
Cargando el chunk del paquete instalado…
De dónde se importa
import { MetricCard } from '@solu30/ui-kit/display'Props
| Prop | Requerida | Tipo | Qué hace |
|---|---|---|---|
| label | sí | string | Metric label — shown above the value in uppercase |
| value | sí | string | number | Main value — already-formatted string or raw number |
| sub | opcional | string | Secondary text shown below the value (e.g. "vs. mes anterior") |
| icon | opcional | React.ComponentType<{ | Optional lucide-compatible icon component |
| className | opcional | string | — |
| color | opcional | MetricCardColor | Semantic color — drives icon bg, icon text, and trend badge |
| trend | opcional | "up" | "down" | "neutral" | Trend direction — renders a directional glyph before trendValue |
| trendValue | opcional | string | Pre-formatted trend label — e.g. "+12%" or "3 productos" |
| size | opcional | "sm" | "md" | Card size — sm for dense grids, md for standalone cards |
| className | opcional | string | — |