KpiCard

Guidelines#

Use it for dashboard and analytics headlines (4 per row from lg, 2 from sm). One card per section may be highlighted for the metric that matters most this period.

What you provide: label (13px muted-foreground), value as a formatted string (24px semibold, tabular-nums), delta in percent vs the previous period (a DeltaPill: emerald up, red down, muted flat — each with an arrow), hint, and a 16px icon shown in a 32px tile. KpiSection takes title (an uppercase 12px overline), icon, isLoading and cardCount (for its skeletons).

Anatomy: cards are rounded-2xl (16px) with a border-glass hairline on background at 70%; the highlighted card switches to primary at 5% with a primary value. The section is glass-panel border-glass rounded-3xl with 24px padding.

Facts#

API#

TypeScript declarations emitted from src/features/analytics/ui/kpi-card.tsx (the module also exports KpiCard, DeltaPill, KpiCardSkeleton, KpiSection).

/**
 * Percent change vs a previous value, or null when no comparison is possible
 * (open-ended period, or previous value was zero).
 */
export declare function trendPct(current: number, previous: number | undefined): number | null;
/** Compact trend pill: "+12%" vs the previous period of equal length. */
export declare function DeltaPill({ delta }: {
    delta: number;
}): JSX.Element;
export declare function KpiCard({ label, value, hint, highlight, delta, icon, }: {
    label: string;
    value: string;
    hint?: string;
    highlight?: boolean;
    /** Percent change vs the previous period (null/undefined hides the trend) */
    delta?: number | null;
    /** Small metric icon rendered in a tile above the value */
    icon?: React.ReactNode;
}): JSX.Element;
export declare function KpiCardSkeleton(): JSX.Element;
export declare function KpiSection({ title, icon, isLoading, cardCount, gridClass, children, }: {
    title: string;
    icon?: React.ReactNode;
    isLoading: boolean;
    cardCount: number;
    gridClass?: string;
    children: React.ReactNode;
}): JSX.Element;

Example#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
function App() {
  return h(DC.KpiSection, { title: "Outbound", icon: h(I.Send, { className: "size-3.5" }), isLoading: false, cardCount: 4 },
    h(DC.KpiCard, { label: "Emails sent", value: "3,412", delta: 12.4, icon: h(I.Mail, { className: "size-4" }) }),
    h(DC.KpiCard, { label: "Reply rate", value: "8.9%", delta: -1.2, icon: h(I.MessageSquare, { className: "size-4" }) }),
    h(DC.KpiCard, { label: "Meetings booked", value: "27", delta: 35, highlight: true, hint: "Best week this quarter", icon: h(I.Calendar, { className: "size-4" }) }),
    h(DC.KpiCard, { label: "Bounces", value: "0.6%", delta: 0, icon: h(I.AlertTriangle, { className: "size-4" }) }));
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>

More in Data display#