# KpiCard

> A KPI tile — label, value, trend — and `KpiSection`, the glass panel that groups them.

## Facts

- **Product**: Max
- **Family**: Data display
- **Global**: `window.DigitalCrew.KpiCard`
- **Source**: `max-agent: src/features/analytics/ui/kpi-card.tsx`
- **Import in the app**: `import { KpiCard } from "@/features/analytics/ui/kpi-card";`
- **Live preview**: /design/components/kpi-card/preview.html
- **Page**: /design/components/kpi-card

## Guidelines

**Use it for** dashboard and analytics headlines (4 per row from `lg`, 2 from `sm`). One card per section may be `highlight`ed 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.

## API

```ts
/**
 * 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

```html
<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

- [AgentFace](/design/components/agent-face.md): A Digital Worker's face: its approved portrait, or its initials on its accent tile.
- [AnimateDigits](/design/components/animate-digits.md): A number whose digits spring in and out as it changes (motion), direction following the change.
- [Avatar](/design/components/avatar.md): A round image with an initials fallback (Radix Avatar), 32px by default.
- [CampaignStatusBadge](/design/components/campaign-status-badge.md): The campaign lifecycle pill: Draft, Active, Paused, Stopped, Completed, Archived.
- [ChannelBadge](/design/components/channel-badge.md): Marks which channel a conversation or step runs on: email (amber), LinkedIn (sky), WhatsApp (emerald).
- [EmailVerificationBadge](/design/components/email-verification-badge.md): The deliverability verdict for an email address, with an icon and an optional score.
- [HeroMetric](/design/components/hero-metric.md): One big number with its previous-period comparison, a trend pill and a pacing bar.
- [MaxIconSet](/design/components/max-icon-set.md): Max's own SVG icons, exported as `DC.MaxIcons`: integration and channel logos, message delivery states, and the appearance-picker tiles.
- [MetricTile](/design/components/metric-tile.md): A compact glass tile for a scored metric: label, value toned by score band, hint.
- [ProspectAvatar](/design/components/prospect-avatar.md): A prospect's photo, or a gradient disc hashed from their name, with an optional unread halo.
- [Snippet](/design/components/snippet.md): A monospace command block with a copy button whose icon turns into a check after copying.
- [TimeLens](/design/components/time-lens.md): Max's agenda: hour marks, ticks and tasks in one scrolling column, read through a fixed lens that shows the time under it.
- [WorldGlobe](/design/components/world-globe.md): An interactive d3-geo globe on canvas with avatar markers that merge into heat-coloured count bubbles.