beUI Pro

Guide · 9 min read · Updated

How to Build a React Dashboard in Next.js

A dashboard is used every day, so small problems compound: a slow table, a chart with no keyboard support, a sidebar that traps focus on mobile. The goal isn't to fill the screen with widgets. It's to answer the user's first question in under five seconds.

This guide builds a dashboard from the shell inward: navigation, the summary row, charts, the working table, and the states people hit when there's no data yet.

What you will build

  • An app shell with responsive, accessible sidebar navigation
  • A KPI row that answers “how are we doing?” at a glance
  • Charts and tables that stay fast with real data volumes
  • Notification and empty states that guide the next action

Step 1

Start with the questions the dashboard answers

List the three questions a user opens the dashboard to answer. A finance view answers “how much did we spend and why?” A support view answers “what needs attention now?” Design the top of the page around the first question only.

In Next.js, fetch data in server components and pass it to client components for interaction. Keep date ranges and filters in the URL so views are shareable and the back button works.

Step 2

Build the app shell and navigation

The sidebar is the most-used component in any dashboard. It needs search for large apps, clear active states, live badges for counts, and correct focus handling when it opens as a drawer on mobile.

Choose between a full sidebar and an icon rail based on how many destinations you have. Under eight top-level items, a rail with a collapsible panel keeps more room for content.

Step 3

Summarize with KPI cards

Show four to six numbers in the top row, each with its comparison period and direction. Animate the number when the date range changes so users notice the update, and keep the change label explicit, for example “+12% vs last month”.

Step 4

Add charts people can read and navigate

Pick the chart for the question: stacked bars for composition over time, a sparkline for trend inside a card, a meter for progress toward a budget. Add a tooltip that follows the active bar and arrow-key navigation so the chart works without a mouse.

Step 5

Make the table the workhorse

Most dashboard time is spent in a table. Virtualize long lists, debounce search, keep filters visible, and support selection with bulk actions. Show status as text plus color so it reads for everyone.

Step 6

Design notifications and empty states

New users see empty states before they see data. Each one should explain what will appear and offer the action that fills it. Notifications should group by type, support marking as read in bulk, and open details inline instead of navigating away.

Install the blocks from this guide

With a beUI Pro token configured, each command adds the block's source to your project through the shadcn CLI. You own the files and can edit them like any other component.

ShellTerminal
npx shadcn add @beui-pro/finance-dashboard
npx shadcn add @beui-pro/support-dashboard
npx shadcn add @beui-pro/sidebar-workspace
npx shadcn add @beui-pro/sidebar-rail
npx shadcn add @beui-pro/stacked-bar-chart
npx shadcn add @beui-pro/data-table-operations
npx shadcn add @beui-pro/notification-panel
npx shadcn add @beui-pro/empty-state-board
Set up the registrySee plans

Launch checklist

  • The first screen answers the main question without scrolling
  • Filters and date ranges live in the URL
  • The sidebar traps focus as a mobile drawer and restores it on close
  • Charts have tooltips and keyboard navigation
  • Long tables are virtualized and searchable
  • Every empty state offers a next action

Frequently asked questions

Should I use a dashboard template or build from blocks?
Start from a full dashboard page if its layout matches your product closely. Build from blocks when your navigation, data, or workflow differs, since you can combine a sidebar, KPI row, charts, and tables freely.
Which chart library do these blocks use?
The shared charts (stacked bars, segmented meters, sparklines) are composable React components built with SVG and Motion. Some report blocks use Recharts. Either way you get the source and can restyle it.
How do I keep a dashboard fast with lots of data?
Fetch on the server, paginate or virtualize tables, defer search input, and avoid animating layout properties. Animate transforms and opacity only.
Do the dashboard blocks support dark mode?
Yes. They use Tailwind CSS theme tokens, so they follow your light and dark themes automatically.

Keep building

CollectionDashboards and reportingBuild a React dashboard with finance, support, capacity, and goals layouts, animated KPI cards, reports, and data tables. Compare live examples.GuideHow to Build a User Onboarding Flow in ReactBuild a React onboarding flow from sign-up to first value: auth screens, step forms, team invites, setup checklists, and empty states, with installable blocks.GuideHow to Build an AI Chat Interface in ReactBuild an AI chat UI in React: the prompt composer, attachments and model selection, sources, clarifying questions, voice mode, and usage limits.GuideHow to Build a Pricing Page in React That ConvertsDesign and build a React pricing page: plan structure, billing toggles, seat calculators, comparison tables, and FAQs, with animated blocks you can install.