DocsSupportPricing
Roadmap (has updates coming soon)XFigma3.6K
Sign inGet All-Access
Categories
App ShellAdded 10 new app shell blocks31
Auth20
Card43
Chart30
Dashboard8
Dialog14
Empty State14
Event Calendar6
Flow4
Form12
Gantt4
Kanban Board10
List11
Navbar13
Onboarding9
Profile10
Schedule10
Settings16
Sheet11
Stats15
  • Stats 1
  • Stats 2
  • Stats 3
  • Stats 4
  • Stats 5
  • Stats 6
  • Stats 7
  • Stats 8
  • Stats 9
  • Stats 10
  • Stats 11
  • Stats 12
  • Stats 13
  • Stats 14
  • Stats 15
Timeline9
Wizard7

Shadcn Stats Blocks: One Metric, Fully Explained

A stat block does one 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 Chart. Card blocks are grids of many small tiles sharing one layout. Chart blocks plot a series against an axis. Stats blocks sit between them: a single metric card or a compact panel with its own meter, its own range filter, and its own actions menu.

Most are built on the ReUI Frame with a Badge for the delta, shadcn Progress for the meter, and a Select for the range filter, so the same panel works for revenue, leads, tasks, tickets, quota, compliance, or feature adoption 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 1 KPI stat card grid with up or down trend badges and a per-card overflow action menu
  • Stats 2 Color-block KPI stat cards with delta badge, vs-last-month row, and overflow menu
  • Stats 3 Subscription stats card with plan-tier segmented bar and expiring-soon renewal list
  • Stats 4 Leads overview stats card with range filter, progress bar and segmented returning-leads meter
  • Stats 5 Dark balance stat card with segmented multi-currency allocation bar and topup action
  • Stats 6 Staff performance card with KPI trend grid, pipeline progress bar, and activity feed
  • Stats 7 Three-column stats panel with divided cells, large metric values and trend badges
  • Stats 8 Three-column KPI stat cards with icon tiles, trend badges, and date range footer
  • Stats 9 Tasks overview stat card with animated completion progress bar and AI finish-time prediction
  • Stats 10 Total Revenue stat card with trend badge, dropdown actions menu, and supporting metric rows
  • Stats 11 API call quota usage card with progress bar, billed cost, and renewal date
  • Stats 12 Support metrics stat card grid with colored icon tiles and status badges
  • Stats 13 Compliance checks stat card with segmented bar gauge and overflow actions menu
  • Stats 14 Feature adoption stat card with segmented stacked indigo bar chart and actions dropdown
  • Stats 15 Three color-filled hero stat cards with metric, summary, and dark CTA action bar

Ways These Blocks Give a Number Context

  • Trend deltas and period comparison a colored up or down Badge with a percent, plus a vs last month or quarter over quarter line, on four column KPI grids, three column divided panels, and a single Total Revenue card.
  • Progress and quota meters an API call usage card tracking calls against a monthly quota with billed cost, remaining free calls, and a renewal date, and an animated task completion bar with Backlog, In Progress, and In Review buckets.
  • Segmented bars and gauges a filled block gauge for compliance checks passing, a graduated segmented bar for feature adoption, a thirty segment returning leads meter, 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.
  • 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, and a recent activity feed under a sales rep pipeline bar.

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 leads and tasks cards, a quarter filter on the staff performance panel, and a per card overflow DropdownMenu on the KPI grids and on the revenue, compliance, and adoption cards. 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 three 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 top source and conversion rate on the leads card.

Where Stats Blocks Fit in a Dashboard

  • As a header row above a table or chart, using the three column divided panel or the four 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.

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.
  • Chart (30) 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 (307) Browse 307 Shadcn Application blocks across 22 categories.
  • Shadcn Data Grid Blocks (38) Browse 38 Shadcn Data Grid blocks across 8 categories.
  • Shadcn Solutions Blocks (66) Browse 66 Shadcn Solutions blocks across 9 categories.
  • Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
  • Shadcn Marketing Blocks (60) Browse 60 Shadcn Marketing blocks across 8 categories.
  • Shadcn AI & Agents Blocks (17) Browse 17 Shadcn AI & Agents blocks across 2 categories.

Frequently Asked Questions

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

Card blocks are mostly grids: many tiles sharing one layout, useful for a wall of metrics, logos, or links. Stats blocks focus on a single metric with its own context, a meter or gauge, a range filter, and per card actions. In practice teams use a Stats panel for the headline number and a Card grid for 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 the 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.

Application

  • App ShellAdded 10 new app shell blocks
  • Auth
  • Card
  • Chart
  • Dashboard
  • Dialog
  • Empty State
  • Event Calendar
  • Flow
  • Form
  • Gantt
  • Kanban Board
  • List
  • Navbar
  • Onboarding
  • Profile
  • Schedule
  • Settings
  • Sheet
  • Stats
  • Timeline
  • Wizard

Solutions

  • Agents
  • AI Ops
  • Analytics
  • Billing
  • Bookings
  • CRM
  • Files
  • Inventory
  • Users

AI & Agents

  • AI Chat
  • Agent Activity

Templates

  • E-commerce
  • SaaS
  • Dashboard
  • Landing
  • All templates

eCommerce

  • Category Card
  • Checkout
  • Comparison
  • Coupon
  • Filter Sidebar
  • Product Card
  • Product Detail
  • Product Grid
  • Receipt
  • Review
  • Shopping Cart
  • Wishlist
  • Shop Hero

Data Grid

  • BaseAdded a rate card Data Grid block with a price breakdown dialog
  • Columns
  • Drag & Drop
  • Editing
  • Expansion
  • Filtering
  • Grouping
  • Virtualization

Marketing

  • Blog
  • CompareNew Compare category with 3 versus section blocks
  • Contact
  • CTAAdded 11 new CTA blocks
  • FAQ
  • Hero
  • How It WorksNew How It Works category with 5 numbered step blocks
  • PricingNew Pricing category with a 4-tier pricing table block

Resources

  • Components
  • Blocks
  • Icons
  • MCP for Agents
  • Docs
  • Support
  • Pricing
  • Tailwind Plus Alternative
  • Roadmap(has updates coming soon)
  • AffiliateSoon

Legal

  • Privacy Policy
  • Terms & Conditions
  • License
  • Refunds
  • Cookies

© 2026 ReUI. All rights reserved.

3.6K
  1. Blocks
  2. Application
  3. Stats

Shadcn Stats and KPI Card Blocks with Trend Deltas

Share

Stats blocks explain a single number: KPI cards with an up or down delta, segmented gauges, quota usage bars, tier breakdowns, and panels with an activity feed.