Dashboard Page
One page of a dashboard: a title with its actions, a row of key numbers, then your content. It sits inside DashboardShell but works anywhere. The title is the page's h1.
A ready-made piece, built from the library's own parts.
A block puts several components together into something you would otherwise assemble by hand. It never fetches data: you give it the data, or answer its callbacks. It is copied into your project like any component, with the parts it uses, so you can change anything.
Basic
Customers
Key numbers
Overview
Overview
Key numbers
Loading
Customers
Key numbers
Installation
npx rdloom add dashboard-pageCopies the source into src/components/rdloom. Edit it freely: rdloom upgrade merges later versions into your changes.
Use another registry client
npx shadcn@latest add https://rdloom.vimalbhatt.com/r/dashboard-page.jsonWorks, but without upgrade tracking.
Usage
import { Button, DashboardPage } from "@rdloom/react";
<div className="mx-auto w-[56rem] max-w-full">
<DashboardPage
title="Customers"
description="Everyone on a plan, with what they pay."
actions={
<>
<Button variant="secondary">Export</Button>
<Button>Add customer</Button>
</>
}
stats={[
{ label: "Customers", value: 1284, trend: { change: 3.2, label: "vs last month" } },
{ label: "Monthly revenue", value: "$48,200", trend: { change: 12, label: "vs last month" }, data: [31, 34, 33, 38, 41, 44, 48] },
{ label: "Churn", value: "1.8%", trend: { change: -0.4, goodWhen: "down", label: "vs last month" } },
{ label: "Trials", value: 36, description: "9 end this week" },
]}
/>
</div>API Reference
Defined by the spec. Components also accept the props of the React Aria component they wrap.
| Prop | Type | Default |
|---|---|---|
titlerequiredThe page's title, shown as its h1. | string | none |
descriptionOne or two sentences under the title. | string | none |
actionsButtons for the right of the title, e.g. Export and Add customer. | node | none |
statsThe key numbers shown in a row of cards under the title: label, value, and optionally a trend, a small history and a note. | DashboardStat[] | none |
isLoadingShow the key numbers as skeletons and mark the page busy. | boolean | false |
childrenThe rest of the page: charts, tables, forms. | node | none |
classNamesExtra class names for single parts, so you can restyle one part without editing the file. Keys: root, header, title, description, actions, stats, stat, content. | Partial<Record<"root" | "header" | "title" | "description" | "actions" | "stats" | "stat" | "content", string>> | none |
Accessibility
Role none, WCAG 2.2 AA. Tested with axe and keyboard tests; screen reader checks are in the audit checklist.
Keyboard
- Tab: moves through the actions, then the page content
Screen readers announce
- "Customers, heading level 1"
- "Key numbers" section, then "Monthly revenue: $48,200. Up 12% compared with last month."
What your code must do
- The title is the page's only h1, so there is one clear heading to jump to
- The key numbers are a labelled section (heading "Key numbers", read only by screen readers) and each one reads as a sentence
- Columns share the width equally, so a long number never pushes the others off screen; two columns on a phone, four on a wide screen
- While loading the page is marked busy and numbers are skeletons, never made-up values
Block contract
- Data
- A title, an optional description, and stats as plain objects.
- Data states
- loading, ready
- Permissions
- None yet
- Events
- None
- You can replace
- classNames for each part; actions slot; children; the Stat cards it draws; the PageHeader it is built on
Guidelines
Use it when
- The top of any page inside a dashboard
Avoid it when
- Pages with a long form as the main content: use a plain heading and the form
Don't
- More than one h1 on a page
- Showing placeholder numbers while data loads
Design tokens
The semantic tokens this component uses. Change them once and every component follows; see Design tokens.
--rd-color-text-default--rd-color-text-muted--rd-color-surface-default--rd-color-border-default