nyuchimzizi
Mzizi — an open-architecture project of the Bundu Foundation, operated and developed by Nyuchi. Built on the Five African Minerals palette.
Built by Nyuchi Africav4.0.39
Key Performance Indicator card. Displays a metric label, large value, optional change percentage with trend direction. Extracted from analytics-dashboard-page, console-dashboard-page, and wallet-page where the same pattern was repeated inline. Brand-agnostic — uses semantic CSS vars only.
View the full component source code below.
"use client"
import * as React from "react"
import { cn } from "@/lib/utils"
interface KPICardProps extends React.HTMLAttributes<HTMLDivElement> {
label: string
value: string | number
change?: number
trend?: "up" | "down" | "flat"
prefix?: string
suffix?: string
loading?: boolean
}
export function KPICard({ label, value, change, trend, prefix, suffix, loading = false, className, ...props }: KPICardProps) {
if (loading) return <div data-slot="kpi-card" data-portal="https://design.nyuchi.com/components/kpi-card" data-loading className={cn("h-24 animate-pulse rounded-[var(--radius-lg,14px)] bg-muted", className)} />
const derivedTrend = trend || (change != null ? (change > 0 ? "up" : change < 0 ? "down" : "flat") : undefined)
return (
<div data-slot="kpi-card" className={cn("rounded-[var(--radius-lg,14px)] bg-card p-4 border border-border", className)} {...props}>
<p className="text-xs text-muted-foreground">{label}</p>
<p className="mt-1 text-2xl font-bold tabular-nums">{prefix}{typeof value === "number" ? value.toLocaleString() : value}{suffix}</p>
{change != null && (
<p className={cn("mt-0.5 text-xs font-medium", derivedTrend === "up" ? "text-[var(--status-success,#64FFDA)]" : derivedTrend === "down" ? "text-[var(--status-error,#FF5252)]" : "text-muted-foreground")}>
{change >= 0 ? "+" : ""}{change}%
</p>
)}
</div>
)
}
export type { KPICardProps }npx shadcn@latest add https://mzizi.dev/api/v1/ui/kpi-cardFetch this component's metadata and source code from the registry API.
/api/v1/ui/kpi-card