Loading…

Dashboard

Block

An overview page with headline metrics and a recent activity feed.

Dashboards
4 components
1 file

Overview

How things are going.

Monthly revenue

$48,120

up 12.4% on last month

Active users

2,410

up 4.2% on last week

Churn

1.8%

up 0.4% on last month

Uptime

99.98%

Recent activity

The last few things that happened.

Deployed to productionSucceeded
Build 1420 · main
12 minutes ago
Build finished with warningsWarning
3 unused exports
20 minutes ago
Build failedFailed
Type error in table.tsx
53 minutes ago
Opened pull request #482
Yesterday

Installation

The block is written to your blocks directory, and everything it is built from is installed alongside it.

$pnpm dlx @dowel-ui/cli add dashboard

Usage

A starting point, not a black box: render it, then edit the layout, the copy and the fields — they are yours.

app/page.tsxTSX

import { DashboardBlock } from "@/components/blocks/dashboard";

Built from

Every piece is a component you already have documentation for, and can change independently.

API

<DashboardBlock>

Prop	Type	Default
`stats` (required)	`DashboardStat[]`	—
`actions` Anything to put beside the heading — a date range picker, an action.	`ReactNode`	—
`description`	`string`	`"How things are going."`
`events`	`DashboardEvent[]`	`[]`
`loading` Renders placeholders instead of content.	`boolean`	`false`
`title`	`string`	`"Overview"`
`className`	`string`	—

Accessibility

Each metric states its change in words — "up 12.4%" — rather than by a coloured arrow, which is unreadable to a screen reader and ambiguous to anyone who cannot distinguish the colours. Whether a rise is good is configurable, since churn going up is not. The metrics sit in a named region so they can be jumped to.