KPI Card

Installation

pnpm dlx shadcn@latest add @ecodeliver/kpi-card

Usage

type picks the Spanish label and Lucide icon. For incidents and expiredPackages, a decrease is treated as favourable (green). unit is part of the payload but is not shown.

earnings is in the type union but has no label or icon mapping, so it will render without either.

import { KPICard } from "@/components/registry/kpi-card";

export function Example() {
  return (
    <KPICard
      kpi={{
        type: "sales",
        value: 42,
        changePercentage: 12.5,
        unit: "package",
      }}
    />
  );
}

API Reference

KPICard

The KPICard component displays one KPI.

kpi