caliper uidocs
DemoSign inGet Pro

Whiteboard

Pro

An infinite board of notes: pan, zoom, add and connect notes, select several, undo anything, jump with the minimap, and work through an outline without a pointer.

Installs components/ui/whiteboard.tsxDepends on @radix-ui/react-dropdown-menu, @radix-ui/react-slot, @radix-ui/react-tooltip, lucide-reactMotion shared motion tokens
pnpm dlx shadcn@latest add @caliper/whiteboard

October retro

Close took 1.8 days, down from 6.4

NetSuite sync errors on Mondays

Customers ask for multi-entity reports

Write the case study with Ostra

Retry with backoff, alert on provider lag

Spike: consolidated P&L

V select · H pan · N note · C connect · arrows move · Enter edits · Delete removes · Ctrl or ⌘ + Z undoes · + and − zoom

When to use #

Use it for

  • Planning, retros and mapping ideas.
  • Products that need a light spatial canvas.

Skip it when

  • A fixed process diagram; use the flow diagram.

Installation #

terminal
pnpm dlx shadcn@latest add @caliper/whiteboard

Adds its 8 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.

example.tsx
import { Whiteboard } from "@/components/ui/whiteboard"

The worked example comes with Pro

The 24-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

Whiteboard

component
PropTypeDefaultDescription
value *BoardValue—
onChange *(value: BoardValue) => void—
labelstring"Whiteboard"
heightnumber560Height of the board in pixels.
classNamestring—

Accessibility #

It exposes group, application and status semantics, with aria-labelledby, aria-hidden, aria-label, aria-roledescription and aria-describedby kept in step with state. Changes that matter are announced through a live region.

KeyBehaviour
SpaceActivates the focused control.
EscapeCloses or cancels, then returns focus to where it came from.
EnterActivates the focused control.

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.