KPI Card (Universal)

Metric card with value, optional icon, and trend indicator. Works on iOS, Android, and web from one codebase.

Installation

Install the native ManpowerHub theme first, then add the KPI card:

pnpmnpmyarnbun

pnpm dlx @react-native-reusables/cli@latest add http://localhost:4321/r/native-manpowerhub-kpi.json

Dependencies

This item pulls in:

• native-manpowerhub-theme
• RNR Text (upstream)
• lucide-react-native

Usage

import { KpiCard } from "@/components/ui/kpi-card";

export function DashboardKpis() {
  return (
    <KpiCard
      label="Active deployments"
      value="128"
      trend="+12% vs last month"
      trendDirection="up"
    />
  );
}

Web equivalent

For Vite microfrontends, use KPI Card (web) with shadcn@latest add @woxcn/manpowerhub-kpi.