fn_registry/frontend/functions/ui/kpi_card.md

name, kind, lang, domain, version, purity, signature, description, tags, uses_functions, uses_types, returns, returns_optional, error_type, imports, tested, tests, test_file_path, file_path, props, emits, has_state, framework, variant, source_repo, source_license, source_file

name	kind	lang	domain	version	purity	signature	description	tags	uses_functions	uses_types	returns	returns_optional	error_type	imports	tested	tests	test_file_path	file_path	props	emits	has_state	framework	variant	source_repo	source_license	source_file
kpi_card	component	typescript	ui	2.0.0	impure	KPICard(props: KPICardProps): JSX.Element	Card de KPI con label, valor+unidad, delta descriptivo con color semántico, icono, slot de chart inline y action. 3 tamaños.	kpi card metrics dashboard component ui sparkline	cn_typescript_core			false		react	false			frontend/functions/ui/kpi_card.tsx	name type required description label string true Etiqueta del KPI name type required description value string | number true Valor principal name type required description unit string false Unidad junto al valor en font menor (ej: k, ms, %) name type required description delta { value: number; isPositive: boolean; label?: string; suffix?: string } false Cambio con dirección, label descriptivo y sufijo name type required description icon ReactNode false Icono a la izquierda del label name type required description action ReactNode false Slot top-right para menú o acciones name type required description chart ReactNode false Slot para mini chart inline junto al valor name type required description size 'sm' | 'default' | 'lg' false Tamaño		false	react	sm default lg	https://gitea-dgg044oo04woo4ggcsws4gk0.organic-machine.com/Bl4cksmith/Frontend_Library	MIT	frontend/src/components/ui/kpi-card.tsx

Ejemplo

import { KPICard, Sparkline } from '@anthropic/frontend-lib'

{/* Básico */}
<KPICard label="Revenue" value="$12,450" delta={{ value: 12.5, isPositive: true }} />

{/* Con unidad separada, delta descriptivo, y mini barras */}
<KPICard
  label="Processed Prompts"
  value="124"
  unit="k"
  icon={<ZapIcon className="h-4 w-4" />}
  delta={{ value: 15, isPositive: true, label: "Prompts Increased by", suffix: "vs yesterday" }}
  chart={<Sparkline data={[5, 8, 3, 9, 6, 12, 7]} variant="bar" colors={['#3b82f6', '#8b5cf6', '#f59e0b', '#10b981', '#ef4444', '#ec4899', '#06b6d4']} height={32} />}
  action={<button className="text-muted-foreground hover:text-foreground">...</button>}
/>

{/* Dashboard dark sin bordes */}
<KPICard label="Sessions" value={9821} className="border-0 shadow-none" />

Notas

• El icono ahora se renderiza a la izquierda del label (antes estaba a la derecha).
• unit separa la unidad del valor con font menor para el efecto "124 k" del diseño.
• delta.label y delta.suffix permiten texto descriptivo: "Increased by ▲ +15% vs yesterday".
• chart es un slot genérico — pasar un <Sparkline variant="bar" colors={[...]} /> para mini barras multicolor.
• action es un slot top-right para menú contextual.
• Usa cn() para merge de clases. className="border-0 shadow-none" para dashboards dark.