Shadcn Stats and KPI Card Blocks with Trend Deltas

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.

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
A metric whose value carries a small trend drawn beside or under it: use the Sparkline blocks
A whole overview page with a header, summary tiles and a work list or trend under them: use the Dashboard blocks

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

Markdownhttps://web.dev.reui.io/blocks/application/stats.md

MCPsearch({ query: "stats", type: "block", category: "stats" })

Full index for agents:llms.txtReUI MCP setup

Shadcn Stats Blocks: A Single Metric, Fully Explained

A stat block has a single job: take a number and give it enough context to act on. That means a delta against the previous period, a target or quota it is measured against, a breakdown of what it is made of, or a short list of the records behind it. Every block in this category commits to one of those framings rather than showing a bare figure.

That is what separates this category from Card and Charts. Card blocks are grids of many small tiles sharing the same layout. Chart blocks plot a series against an axis. Stats blocks sit between them: a single metric card, a short row of them, or a compact panel that carries its own context, such as a meter, a period filter, or an actions menu.

Most are built on the ReUI Frame with a Badge for the delta, shadcn Progress or a segmented bar for the meter, and a Select or Tabs for the period, so the same panel works for revenue, leads, tasks, tickets, quota, compliance, feature adoption, portfolio allocation, or operating capacity by swapping the label and the number.

All Stats Blocks

Open any block on its own page for a live preview, the components it is built from, and the install command.

Stats Overview KPI stat card grid with up or down trend badges and a per-card overflow action menu
KPI Scorecard Color-block KPI stat cards with delta badge, vs-last-month row, and overflow menu
Subscription Renewals Subscription stats card with plan-tier segmented bar and expiring-soon renewal list
Leads Overview Leads overview stats card with range filter, progress bar and segmented returning-leads meter
Wallet Balance Dark balance stat card with segmented multi-currency allocation bar and topup action
Rep Performance Staff performance card with KPI trend grid, pipeline progress bar, and activity feed
Sales & Churn Metrics Three-column stats panel with divided cells, large metric values and trend badges
Analytics Overview Three-column KPI stat cards with icon tiles, trend badges, and date range footer
Task Progress Tasks overview stat card with animated completion progress bar and AI finish-time prediction
Total Revenue Total Revenue stat card with trend badge, dropdown actions menu, and supporting metric rows
API Quota Usage API call quota usage card with progress bar, billed cost, and renewal date
Support Metrics Support metrics stat card grid with colored icon tiles and status badges
Compliance Checks Compliance checks stat card with segmented bar gauge and overflow actions menu
Adoption Rate Feature adoption stat card with segmented stacked indigo bar chart and actions dropdown
KPI Callouts Three color-filled hero stat cards with metric, summary, and dark CTA action bar
Portfolio Allocation Portfolio allocation cards for 3 asset sleeves with period tabs, delta badges and segmented meters
Capacity Usage Capacity usage strip of 3 divided metric cells with value over total and segmented meters

Ways These Blocks Give a Number Context

Trend deltas and period comparison an up or down Badge with a percent, plus a vs last month or quarter over quarter line, on 4 column KPI grids, the 3 column divided sales and churn panel, a single Total Revenue card, and portfolio sleeve cards whose 1W, 1M, 3M, and 1Y Tabs swap the delta and its comparison.
Progress, quota, and capacity meters an API call usage card tracking calls against a monthly quota with billed cost, remaining free calls, and a renewal date, an animated task completion bar with Backlog, In Progress, and In Review buckets, and a capacity strip that measures invoices, stock, and budget against their totals.
Segmented bars and gauges a filled block gauge for compliance checks passing, a graduated segmented bar for feature adoption, a 30 segment returning leads meter, 40 segment meters on the portfolio allocation cards and the capacity strip, and a color coded currency allocation bar on a wallet balance card.
Composition breakdowns a stacked Free, Pro, and Enterprise tier bar with a legend on the subscription card, so the total and its makeup read in a single pass instead of needing a separate chart, and equities, fixed income, and alternatives sleeve cards that each give their share of the portfolio with its dollar exposure.
Metric plus supporting records an Expiring Soon renewal list with plan badges, days left, and renew links, stacked supporting metric rows under a revenue figure, a recent activity feed under a sales rep pipeline bar, and a manager Avatar stack with a manager count in each portfolio sleeve's footer.

Self Contained Filters, Actions, and Visual Weight

Several cards carry their own controls rather than depending on a dashboard level toolbar: a time range Select on the subscription, leads, and tasks cards, a quarter filter on the staff performance panel, period Tabs on each portfolio allocation card, and a per card overflow DropdownMenu on the KPI grids, on the revenue, compliance, and adoption cards, and on each cell of the capacity strip. That keeps a stat panel usable when you embed it on a page with no global filter bar.

Visual weight ranges from quiet to loud. Bordered Frame panels with colored icon tiles suit a dense dashboard, solid color block cards read as a scorecard, a dark balance card suits a finance or crypto surface, and 3 full bleed hero cards with a dark bottom call to action bar work as an overview highlight. Tooltip detail carries what does not fit, such as what the conversion rate on the leads card measures, the Enterprise plan note on the subscription card, and a short note on each portfolio sleeve.

Where Stats Blocks Fit in a Dashboard

As a header row above a table or chart, using one of the 3 column divided panels or a 4 column KPI grid with overflow menus.
As a sidebar or column widget, using a single metric card such as quota usage, compliance checks, or feature adoption.
As a scorecard screen, combining a color block KPI row with the staff performance panel and its pipeline bar and activity feed.
As a billing or plan surface, pairing the subscription tier breakdown and Expiring Soon list with the API quota usage card.
As a highlight section on an overview page, using the hero stat cards with their call to action bar.
As a finance or operations overview, using the portfolio allocation cards with their period tabs or the capacity strip for invoices, stock, and budget.

Related Shadcn Application Block Categories

Stats panels are almost always assembled next to these categories on the same screen.

Card (43) The largest category, mostly grids of tiles: KPI walls, logo grids, profile and record cards.
Charts (51) Bar, line, pie, and area charts for when a metric needs a plotted series over time.
Dashboard (8) Complete overview screens that already combine stats, charts, and tables.
List (11) Record and activity lists for the detail behind a headline metric.
Timeline (9) Activity feeds and audit histories that explain how a number moved.
Empty State (14) No data placeholders for stat panels before the first data arrives.

All Shadcn Block Groups

Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.

Shadcn Application Blocks (303) Browse 303 Shadcn Application blocks across 23 categories.
Shadcn Data Grid Blocks (47) Browse 47 Shadcn Data Grid blocks across 9 categories.
Shadcn Charts Blocks (52) Browse 52 Shadcn Charts blocks across 10 categories.
Shadcn Solutions Blocks (76) Browse 76 Shadcn Solutions blocks across 11 categories.
Shadcn AI & Agents Blocks (22) Browse 22 Shadcn AI & Agents blocks across 3 categories.
Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
Shadcn Marketing Blocks (67) Browse 67 Shadcn Marketing blocks across 8 categories.

Frequently Asked Questions

What is the difference between the Stats and Card block categories?

Card blocks are mostly grids: many tiles sharing the same layout, useful for a wall of metrics, logos, or links. Stats blocks focus on a single metric with its own context, such as a delta, a meter or gauge, a range filter, or an actions menu. A Stats panel suits the headline number, and a Card grid suits the supporting ones.

Do these stats blocks include charts?

Not plotted series. The visualisations here are progress bars, segmented block gauges, stacked composition bars, and meters built with layout and Tailwind, so a stat card adds no charting runtime. When you need axes, lines, areas, or pies over time, use a Chart block and place it under your stat row.

How do I install a stats block?

Every block page carries a shadcn CLI install command for the ReUI registry. It copies the block plus its dependencies, such as Frame, Badge, Progress, Select, and DropdownMenu, into your project as editable source. Replace the sample figures with your own query results and wire any range filter to your date state.

Can I change the colors and the size of the numbers?

Yes. Values, labels, and deltas are Tailwind typography classes over your theme tokens, and the colored icon tiles, solid color panels, and gauge segments are class level choices. Set a base, style, and radius in the customizer before copying so borders and corners match the rest of your app, or adjust the classes after install.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.