DocsSupportPricing
Roadmap (has updates coming soon)XFigma3.7K
Sign inGet All-Access
Categories
App Shell35
Auth20
Card43
Dashboard8
  • Fulfillment Exceptions
  • Module Tracker
  • Worklog Timesheet
  • Voice Agent Calls
  • Edge Security Telemetry
  • Workforce Coverage
  • Retail Revenue
  • Royalty Payouts
Dialog14
Empty State14
Event Calendar6
Flow4
Form12
Gantt4
Kanban Board10
List11
Navbar13
Onboarding9
Profile10
Rich Text Editor5
Schedule10
Settings16
Sheet24
Stats2 meter cards moved here from Charts, 17 in all17
Timeline9
Whiteboard2
Wizard7

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 full page overview: a header, a row of summary tiles, then a trend chart, a work list or both
  • A team home for fulfillment, product modules, timesheets, staffing, calls, security, revenue or payouts

When not to use

  • One trend panel to drop into a page layout you already have: use the Area Chart blocks
  • A strip of KPI tiles on its own, with nothing under it: use the Stats blocks
  • Product usage reporting on activation, cohorts, events or experiments: use the Analytics blocks

Agent notes

  • Each block sets its own min-h-svh wrapper, padding and max width in page.tsx, its root component or both; strip them inside an app shell

Third-party API docs

  • Sonner v2: API reference, docs, used by 8 of 8 blocks
  • Recharts v3: API reference, docs, used by 7 of 8 blocks
  • date-fns v4: docs, used by 6 of 8 blocks
  • React DayPicker v9: API reference, docs, used by 6 of 8 blocks
  • TanStack Table v9: API reference, docs, used by 5 of 8 blocks
Markdownhttps://web.dev.reui.io/blocks/application/dashboard.md
MCPsearch({ query: "dashboard", type: "block", category: "dashboard" })
Full index for agents:llms.txtReUI MCP setup

Complete Dashboard Screens, Not Dashboard Widgets

A dashboard is the hardest screen in most products because it stacks three problems: summarising state, showing trend, and giving someone something to act on. Each block here solves all three inside one layout instead of leaving you to assemble a metric strip, a chart, and a table that were never designed to sit together.

They are built on ReUI Frame and Badge with shadcn Chart, Tabs, Select, and Breadcrumb. Five of the eight close with a ReUI DataGrid carrying search, sorting, status filters, and pagination, so the action layer is a working grid and not a static table.

Every one is written against a specific operational domain, so the columns, thresholds, tab states, and empty states already read like a product rather than placeholder data. Swap the fixtures for your API response and the hierarchy still holds.

All Dashboard Blocks

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

  • Fulfillment Exceptions Operations dashboard with KPI stat cards, capacity charts, and a filterable exception data grid
  • Module Tracker Operations Dashboard with Sparkline Metric Cards and Searchable Module Data Grid
  • Worklog Timesheet Project delivery dashboard with tabbed header and weekly per-person worklog timesheet grid
  • Voice Agent Calls Voice Agent Call Analytics Dashboard with Tabbed Metric Switcher and Composed Area Chart
  • Edge Security Telemetry Edge Security Telemetry Dashboard with KPI Sparkline Tiles, Threat Charts and Node Load Bars
  • Workforce Coverage Field Workforce Coverage Dashboard with Crew Table, Action Queue, and Supply vs Forecast Chart
  • Retail Revenue Retail revenue dashboard with KPI sparkline cards, stacked sales charts, and a sortable order queue
  • Royalty Payouts Creator royalty payout dashboard with sweep-lane payout control and a sortable ledger DataGrid

The Three Layers Every Dashboard Block Ships

  • Metric layer KPI tiles and stat cards with tone-coded deltas, inline SVG or Recharts sparklines, and trend Badge chips, so the number and its direction land together.
  • Chart layer Area, stacked area, donut, composed area-and-line, and ranked bar charts on shadcn Chart, with capacity allocation Tabs and metric switchers reusing the same canvas.
  • Action layer A searchable, sortable, paginated ReUI DataGrid or shadcn Table holding the exception queue, order queue, crew roster, worklog, or ledger the metrics point at.
  • Header chrome Breadcrumb trails, date-range pickers over shadcn Calendar, collaborator Avatar stacks, Progress meters, and DropdownMenu row actions, already positioned.

Operational Domains These Dashboards Are Written Against

Generic dashboards make you invent the content. These start from a job someone actually does.

  • Fulfillment control: shift performance, capacity allocation tabs, a donut flow chart, and a paginated exception queue you can filter down to one failing order.
  • Voice AI call analytics: a six-metric tab switcher across calls, duration, and LLM cost over a composed area and line chart, with ranked agent bars and integration status.
  • Edge security telemetry for SOC and NOC teams: KPI sparkline tiles, threat-vector and network-flow charts, per-node cluster load bars, and active threat progress lanes.
  • Field workforce coverage: a crew table with coverage progress bars, an action queue, and a stacked supply versus forecast chart.
  • Retail revenue: sparkline KPI cards, a stacked area revenue chart, a channel-mix bar chart, and a sortable order queue with fulfillment bars.
  • Creator royalty payouts: a claimable balance command band, a receipts versus buffer chart, payout sweep lanes, and a searchable ledger.
  • Project delivery: a tabbed header with breadcrumb and collaborators over a weekly per-person worklog timesheet grid with week navigation and designed empty tab states.

Replacing the Fixtures With Your Own Data

Sample rows sit in plain arrays at the top of each file and grid columns are declared as an ordinary column array, so pointing a block at your endpoint means swapping the source and keeping the accessor keys. There is no fetch wrapper to unpick first.

Because tiles, charts, and grid share one Frame surface and one radius and color token set, a partial swap still looks intentional. You can keep the telemetry chart layer and drop in your own queue, or keep the order grid and change the metric row, without the screen coming apart.

Install a block with the shadcn CLI and its dependencies come with it, including DataGrid, Badge, Frame, and the shadcn Chart wrapper around Recharts.

Related Shadcn Application Block Categories

  • Charts (47) Standalone analytics cards you can drop into the chart layer of any dashboard, including gauges, donuts, funnels, and dual-axis lines.
  • Stats (17) KPI strips and metric summaries when you need only the top row of a dashboard rather than a full overview screen.
  • App Shell (35) Sidebar and header layouts to put around a dashboard so the overview screen has navigation, search, and account chrome.
  • Card (43) Individual panels for the gaps between charts and grids, from summaries and activity to compact interactive surfaces.
  • List (11) Compact record and activity rows for the side column of a dashboard when a full data grid is more than you need.
  • Settings (16) Configuration pages that pair with a dashboard once users need to change the thresholds and preferences it reports on.

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 included in a ReUI dashboard block?

A complete overview screen: a KPI metric row, one or more charts, and a searchable data grid or work queue, plus header chrome such as breadcrumbs, a date-range picker, tabs, and filter controls. You get the full page source, the fixture data behind it, and every ReUI and shadcn dependency it imports, installed through the registry in one command.

How do I install a dashboard block?

Open the block on its own page, copy the install command, and run it with the shadcn CLI. The registry pulls the page source into your app along with its dependencies, including DataGrid, Badge, and Frame, so you never copy primitive files by hand. The block lands as normal source you own and can edit.

Can I restyle a dashboard block to match my design system?

Yes. Blocks are plain React and Tailwind CSS over shadcn design tokens, so changing your theme variables restyles tiles, charts, progress bars, and grid together rather than one at a time. The ReUI customizer also lets you choose base, style, radius, and icon set before you copy, so the output matches the rest of your project on arrival.

Do these dashboards work with Base UI as well as Radix?

Yes. Every block is shipped against both bases, so you install the Base UI build or the Radix build depending on what your app already uses. Markup, props, and Tailwind classes stay the same across the two, which means adopting a dashboard does not force a migration in either direction.

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 Shell
  • Auth
  • Card
  • Dashboard
  • Dialog
  • Empty State
  • Event Calendar
  • Flow
  • Form
  • Gantt
  • Kanban Board
  • List
  • Navbar
  • Onboarding
  • Profile
  • Rich Text Editor
  • Schedule
  • Settings
  • Sheet
  • Stats2 meter cards moved here from Charts, 17 in all
  • Timeline
  • Whiteboard
  • Wizard

Data Grid

  • Base
  • AdvancedAdded 2 new Data Grid Advanced blocks, 5 in all
  • Columns
  • Drag & Drop
  • Editing
  • Expansion
  • Filtering
  • Grouping
  • Virtualization

Charts

  • Area ChartAdded a new Inbound Leads area chart block
  • Bar Chart
  • Composed Chart
  • Line Chart
  • Pie Chart
  • Radial Chart
  • Sankey ChartNew Sankey Chart category with 3 flow chart blocks
  • Slope ChartNew Slope Chart category with 2 rank-shift chart blocks
  • Sparkline
  • Status Tracker

AI & Agents

  • AI Chat
  • Agent Activity
  • AI UsageNew AI Usage category with 2 spend blocks

Solutions

  • Dev Ops
  • AI Ops
  • CRM
  • Agents
  • Analytics
  • Billing
  • Bookings
  • Files
  • Inventory
  • Users
  • Digital TwinNew Digital Twin category with 2 interactive 3D blocks

Templates

  • All templates

eCommerce

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

Marketing

  • Blog
  • Compare
  • Contact
  • CTA
  • FAQ
  • Hero
  • How It Works
  • Pricing

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.7K
  1. Blocks
  2. Application
  3. Dashboard
Markdown

Shadcn Dashboard Blocks with KPIs, Charts, and Tables

Whole screens rather than widgets: a metric row over a chart layer, and in most of the 8 a filterable work queue, against ops, revenue, and security data.