caliper uidocs
DemoSign inGet Pro

Release checklist

Pro

A checklist of release steps with owners and status.

Installs components/ui/release-checklist.tsxDepends on @radix-ui/react-slot, lucide-reactMotion shared motion tokens
pnpm dlx shadcn@latest add @caliper/release-checklist
43%

Release 3.2.0

3 of 7 done. 3 required checks are in the way, 1 failing.

Blocked by: Accessibility audit, Release notes reviewed, Migration guide published

Automated

  • Unit and component tests1,284 passed
  • Accessibility audit2 contrast issues on the dark theme
  • Production buildBundle 4% smaller

Manual

  • Release notes reviewedRavi Patel
  • Migration guide publishedMaya Chen
  • Support team briefedKofi Mensah
  • Social posts scheduledoptional

When to use #

Use it for

  • Shipping a version.

Skip it when

  • Tasks span many projects.

Installation #

terminal
pnpm dlx shadcn@latest add @caliper/release-checklist

Adds its 3 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 { ReleaseChecklist } from "@/components/ui/release-checklist"

The worked example comes with Pro

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

Checking your licence…

API reference #

ReleaseChecklist

component
PropTypeDefault
title *string—
checks *readonly ReleaseCheck[]—
onToggle *(id: string) => void—
onRerun((id: string) => void)—
onWaive((id: string, reason: string) => void)—
onRelease *() => void—
classNamestring—

Accessibility #

It exposes img, status and checkbox semantics, with aria-label, aria-describedby, aria-hidden, aria-checked and aria-expanded kept in step with state. Changes that matter are announced through a live region.

KeyBehaviour
EscapeCloses or cancels, then returns focus to where it came from.

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.