MRR
€281k
+5.6% on last month
Dashboard builder
ProA dashboard people arrange: drag or resize tiles that make room and float up, arrows to move them, a widget library, saved layouts and Cancel to put it back.
pnpm dlx shadcn@latest add @caliper/dashboard-builderRevenue
Trials
38
Storage
Note
Q4 target is €320k MRR. Team plan price change shipped on 2 Oct.
Revenue
| Point | Revenue | Event |
|---|---|---|
| Nov | 182 | |
| Dec | 196 | |
| Jan | 204 | |
| Feb | 199 | |
| Mar | 221 | |
| Apr | 236 | |
| May | 248 | |
| Jun | 251 | |
| Jul | 262 | |
| Aug | 270 | |
| Sep | 266 | |
| Oct | 281 |
Seats
Last 8 weeks · 1,080 this week
When to use #
Use it for
- Analytics home pages people tailor.
- Monitoring walls with different views per team.
Skip it when
- A fixed report; lay it out yourself with the charts.
Installation #
terminal
pnpm dlx shadcn@latest add @caliper/dashboard-builder
Adds its 6 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. It is built from DashboardBuilder and settleTiles.
example.tsx
import { DashboardBuilder, settleTiles } from "@/components/ui/dashboard-builder"
The worked example comes with Pro
The 38-line example behind the preview opens here with a Pro or Team licence.
Checking your licence…
API reference #
DashboardBuilder
component
PropTypeDefaultDescription
tiles *readonly DashboardTile[]—
onTilesChange *(tiles: DashboardTile[]) => void—
widgets *readonly DashboardWidget[]—What can be added, and how each renders.
layoutsreadonly DashboardPreset[][]Named arrangements to switch between.
onLayoutsChange((layouts: DashboardPreset[]) => void)—
columnsnumber12
rowHeightnumber76
titlestring"Dashboard"
classNamestring—
settleTiles
component
No props of its own; it accepts the native props of its root element.
Accessibility #
It exposes status semantics, with aria-labelledby, aria-label, aria-hidden, aria-roledescription and aria-describedby kept in step with state. Changes that matter are announced through a live region.
KeyBehaviour
DeleteRemoves the next character or the selected item.
BackspaceRemoves the previous character or item.
Motion #
Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.