KPI Overview

6 variants

KPI cards with animated values, compact headers, bar charts, gauges, trend charts, support metrics, and account summaries.

Compact KPI cards

kpi-overview.tsx

A compact metric row with uppercase labels, rolling values, tiny bar charts, and a dedicated comparison footer.

Recurring revenue
$42,680

+9.41%over last month

Paid accounts
1,460teams

+10.77%over last month

New trials
324this month

+12.89%over last month

Trial conversion
18.6%

+1.40 ppover last month

Install

$ bunx --bun shadcn add @beui-pro/kpi-overview

Gauge KPI cards

kpi-gauge-cards.tsx

Large metric values, supporting notes, animated circular gauges, and individual action menus in a compact card row.

Processed jobs
864per day

Daily target: 1,200

72%
Active seats
38of 50

Plan capacity

76%
Automation rate
84.2%

Quarterly target: 90%

94%

Install

$ bunx --bun shadcn add @beui-pro/kpi-gauge-cards

Connected support KPI cards

kpi-support-cards.tsx

Four connected cards with icon labels, animated metric values, inline monthly comparisons, and individual action menus.

Inbox volume
2,186

+5.4%month over month

Resolved today
312

+8.6%month over month

On-time replies
94%

-0.7%month over month

Helpfulness
4.7/ 5

+1.2%month over month

Install

$ bunx --bun shadcn add @beui-pro/kpi-support-cards

Summary KPI card

kpi-summary-card.tsx

A compact overview with a shared title, review date, divided metrics, animated values, optional limits, and contextual help.

Budget overview

Available budget
$84,750.25of$120,000.00
Committed spend
$35,249.75
Budget period
12months

Install

$ bunx --bun shadcn add @beui-pro/kpi-summary-card

Header KPI cards

kpi-header-cards.tsx

Compact cards with icons beside muted headings and inset panels for animated values and period comparisons.

Bookings
$38,460

+12.8%over last month

Renewals
128

+10.3%over last month

Refunds
$840

-17.6%over last month

Retention
94.2%

+1.4 ppover last month

Install

$ bunx --bun shadcn add @beui-pro/kpi-header-cards