# Shadcn Stats blocks

> Stat components and layouts for KPIs, metric summaries, and compact performance signals.

- Type: Pro blocks (Application)
- Page: https://web.dev.reui.io/blocks/application/stats
- Blocks: 17
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## When to use

- A row of 3 or 4 KPI tiles to sit above the content of a page you already have
- One metric card that pairs a headline figure with a meter, a split bar or supporting rows
- A card already written for one topic: leads, tasks, quota, compliance, renewals, adoption, balance or capacity

## When not to use

- Tiles on a dotted, halftone or line grid backdrop, or records such as profiles or jobs: use the [Card blocks](https://web.dev.reui.io/blocks/application/card.md)
- A metric whose value carries a small trend drawn beside or under it: use the [Sparkline blocks](https://web.dev.reui.io/blocks/chart/sparkline.md)
- A whole overview page with a header, summary tiles and a work list or trend under them: use the [Dashboard blocks](https://web.dev.reui.io/blocks/application/dashboard.md)

## Agent notes

- Each page.tsx only centers `Stats` in a padded wrapper; mount `Stats` from components/stats.tsx inside your own layout
- `Stats` takes no props, fetches nothing and wires no handler, so add props for your own figures and callbacks

## Blocks

- [Stats Overview](https://web.dev.reui.io/blocks/application/stats/stats-1.md): KPI stat card grid with up or down trend badges and a per-card overflow action menu. Best for neutral bordered tiles, 4 across on wide screens, each with a green or red delta badge, last month's value and a 5 item menu.
- [KPI Scorecard](https://web.dev.reui.io/blocks/application/stats/stats-2.md): Color-block KPI stat cards with delta badge, vs-last-month row, and overflow menu. Best for solid color KPI tiles, 1 hue per metric from its data entry, with white text and a translucent delta badge.
- [Subscription Renewals](https://web.dev.reui.io/blocks/application/stats/stats-3.md): Subscription stats card with plan-tier segmented bar and expiring-soon renewal list. Best for a renewal watch list of accounts expiring in days, with plan badges and Renew links under a Free, Pro and Enterprise split bar.
- [Leads Overview](https://web.dev.reui.io/blocks/application/stats/stats-4.md): Leads overview stats card with range filter, progress bar and segmented returning-leads meter. Best for new against returning leads side by side, one a progress bar and one a 30 segment meter, with top source and conversion.
- [Wallet Balance](https://web.dev.reui.io/blocks/application/stats/stats-5.md): Dark balance stat card with segmented multi-currency allocation bar and topup action. Best for a dark wallet balance with a Topup button over a bar split across 5 currencies, each segment labeled with its code and share.
- [Rep Performance](https://web.dev.reui.io/blocks/application/stats/stats-6.md): Staff performance card with KPI trend grid, pipeline progress bar, and activity feed. Best for one sales manager's quarter: 3 trend KPIs, pipeline progress, a recent activity feed and Schedule and Full Report buttons.
- [Sales & Churn Metrics](https://web.dev.reui.io/blocks/application/stats/stats-7.md): Three-column stats panel with divided cells, large metric values and trend badges. Best for one bordered panel split into 3 divided cells, each with its own reporting window and an absolute change against the prior period.
- [Analytics Overview](https://web.dev.reui.io/blocks/application/stats/stats-8.md): Three-column KPI stat cards with icon tiles, trend badges, and date range footer. Best for tiles led by a colored icon tile with the trend badge across from it, each closing on its reporting date range.
- [Task Progress](https://web.dev.reui.io/blocks/application/stats/stats-9.md): Tasks overview stat card with animated completion progress bar and AI finish-time prediction. Best for task status counts for Backlog, In Progress and In Review, a progress bar that fills on mount and an AI finish estimate.
- [Total Revenue](https://web.dev.reui.io/blocks/application/stats/stats-10.md): Total Revenue stat card with trend badge, dropdown actions menu, and supporting metric rows. Best for one revenue figure in USD with a quarter over quarter drop badge and 2 shaded label and value rows under it.
- [API Quota Usage](https://web.dev.reui.io/blocks/application/stats/stats-11.md): API call quota usage card with progress bar, billed cost, and renewal date. Best for a quota meter of API calls used against a monthly cap, with a dollar cost, calls left and a dashed renewal date strip.
- [Support Metrics](https://web.dev.reui.io/blocks/application/stats/stats-12.md): Support metrics stat card grid with colored icon tiles and status badges. Best for support desk tiles for tickets, resolution and satisfaction, each an icon tile over the value, closing on a free text badge.
- [Compliance Checks](https://web.dev.reui.io/blocks/application/stats/stats-13.md): Compliance checks stat card with segmented bar gauge and overflow actions menu. Best for a gauge of 30 small squares, one per check, filled from the left up to the passing count, under a shield title and a percent readout.
- [Adoption Rate](https://web.dev.reui.io/blocks/application/stats/stats-14.md): Feature adoption stat card with segmented stacked indigo bar chart and actions dropdown. Best for an oversized adoption percentage over 8 block columns whose filled runs shrink left to right, shaded dark to light indigo by row.
- [KPI Callouts](https://web.dev.reui.io/blocks/application/stats/stats-15.md): Three color-filled hero stat cards with metric, summary, and dark CTA action bar. Best for colored highlight tiles that each carry a short summary and end in a dark link bar whose arrow slides on hover.
- [Portfolio Allocation](https://web.dev.reui.io/blocks/application/stats/stats-17.md): Portfolio allocation cards for 3 asset sleeves with period tabs, delta badges and segmented meters. Best for sleeve cards that each keep their own reporting period, pairing a share meter with dollar exposure and a manager avatar stack.
- [Capacity Usage](https://web.dev.reui.io/blocks/application/stats/stats-18.md): Capacity usage strip of 3 divided metric cells with value over total and segmented meters. Best for capacity used against a total for 3 metrics, each with a percent derived from its figures, a 40 bar meter and a 4 item actions menu.

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.
