KPI Card
Metric card with value and trend.
import { Users } from "lucide-react";
import { KpiCard } from "@/registry/new-york/items/manpowerhub-kpi/components/kpi-card";
export function ManpowerhubKpiBasic() { return ( <div className="grid w-full max-w-4xl grid-cols-2 gap-3 p-2"> <KpiCard label="Active Workers" icon={<Users />} value="2,847" trend="12% this month" trendDirection="up" /> <KpiCard label="Collection Rate" value="98.4%" valueClassName="text-[var(--brand)]" trend="2.1% improvement" trendDirection="up" /> </div> );}Installation
Section titled “Installation”This installation provides support for all official Shadcn icon libraries. The component is otherwise identical to the non-experimental installation.
Icon support is experimental and may not be fully stable since it uses internal Shadcn APIs.
This component relies on other items which must be installed first.
Copy and paste the following code into your project.
components/ui/kpi-card.tsx
import * as React from "react";import { cva, type VariantProps } from "class-variance-authority";import { TrendingDown, TrendingUp } from "lucide-react";
import { cn } from "@/lib/utils";
const trendVariants = cva("flex items-center gap-1 text-[11.5px] font-medium", { variants: { direction: { up: "text-[var(--green)]", down: "text-[var(--red)]", flat: "text-[var(--text-3)]", }, }, defaultVariants: { direction: "up" },});
export interface KpiCardProps extends React.ComponentProps<"div"> { label: React.ReactNode; value: React.ReactNode; trend?: React.ReactNode; trendDirection?: VariantProps<typeof trendVariants>["direction"]; icon?: React.ReactNode; valueClassName?: string;}
function KpiCard({ className, label, value, trend, trendDirection = "up", icon, valueClassName, ...props}: KpiCardProps) { const TrendIcon = trendDirection === "down" ? TrendingDown : trendDirection === "up" ? TrendingUp : null;
return ( <div data-slot="kpi-card" className={cn( "cursor-default rounded-[var(--r-lg)] border border-border bg-card p-4 transition-[border-color,box-shadow] hover:border-[var(--color-border-strong)] hover:shadow-[var(--shadow)] md:px-[18px] md:py-4", className, )} {...props} > <div className="mb-2 flex items-center justify-between text-[11px] font-medium uppercase tracking-[0.4px] text-[var(--text-3)]"> <span className="flex flex-1 items-center justify-between gap-2"> {label} {icon ? ( <span className="text-[var(--surface-5)] [&_svg]:size-3.5"> {icon} </span> ) : null} </span> </div> <div className={cn( "mb-1.5 text-[26px] leading-none font-extrabold tracking-[-0.5px] text-foreground", valueClassName, )} > {value} </div> {trend ? ( <div className={cn(trendVariants({ direction: trendDirection }))}> {TrendIcon ? <TrendIcon className="size-3" /> : null} {trend} </div> ) : null} </div> );}
export { KpiCard, trendVariants };Update the import paths to match your project setup.
Install the ManpowerHub theme first, then add this kpi card:
npx shadcn@latest add @woxcn/manpowerhub-kpi