Dashboard screen
ProThe day at a glance: one sentence written from the data, figures with their comparison, a marked chart and what waits on you.
pnpm dlx shadcn@latest add @caliper/dashboard-screenThursday, 9 October
Updated 2 minutes ago · compared with last Thursday
Revenue is up 4.2% on last Thursday, mostly from the Team plan. Two invoices failed overnight and one deploy is waiting for your approval.
- Revenue
- $18,240
- up +4.2%
- New trials
- 38
- up +6
- Churned
- 2
- up +1
- Failed payments
- 2
- $1,248 at risk
Revenue by hour
dashed: last time- 05:00 Team plan price change shipped
| Time | This period | Last time |
|---|---|---|
| 00:00 | $120 | $110 |
| 01:00 | $180 | $150 |
| 02:00 | $260 | $230 |
| 03:00 | $410 | $360 |
| 04:00 | $520 | $470 |
| 05:00 | $760 | $640 |
| 06:00 | $940 | $800 |
| 07:00 | $1,180 | $980 |
| 08:00 | $1,460 | $1,220 |
| 09:00 | $1,720 | $1,410 |
Needs you 3
- FailedLumen Labs · $624Card declined · retry in 2 days
- FailedKestrel Bio · $624Card expired
- WaitingDeploy to productionAgent asks to approve
When to use #
Use it for
- The first screen after sign-in.
- People need to know what changed and what to do about it.
Skip it when
- Exploratory analytics; use the chart and table components.
- More than six figures; pick the ones people act on.
Installation #
pnpm dlx shadcn@latest add @caliper/dashboard-screen
Adds its 7 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.
Usage #
Import it from your copy of the source. The example behind the preview comes with the source.
import { DashboardScreen } from "@/components/ui/dashboard-screen"
The worked example comes with Pro
The 72-line example behind the preview opens here with a Pro or Team licence.
API reference #
DashboardScreen
component
Accessibility #
It exposes img and alert semantics, with aria-hidden, aria-label, aria-busy and aria-live kept in step with state. Changes that matter are announced through a live region.
No custom key handling; Tab and the native activation keys do the work.
Motion #
It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.