caliper uidocs
DemoSign inGet Pro

Rollout screen

Pro

A progressive rollout you can feel. One dial carries the share of traffic on the new version: it glides to each checkpoint, the ticks lift toward the handle, and you can drag it or step it from the keyboard. Guardrails read live beside it, and a trip pauses the rollout with the reason in words.

Installs components/ui/rollout-screen.tsxDepends on @radix-ui/react-slot, lucide-reactMotion honours reduced motion
pnpm dlx shadcn@latest add @caliper/rollout-screen

Roll out v2.14.0Ready

Halden API · four regions · bakes 1.5 seconds at each checkpoint

1%5%25%50%100%
  • Error rate0.18%Within limitCurrent 0.18% · limit 1.00%
  • p95 latency182 msWithin limitCurrent 182 ms · limit 320 ms
  • Saturation52%Within limitCurrent 52% · limit 85%
  • FrankfurtWaiting
  • VirginiaWaiting
  • TokyoWaiting
  • São PauloWaiting

    When to use #

    Use it for

    • Canary and progressive delivery for deploys and feature flags.
    • Any staged change where someone watches numbers while traffic shifts.

    Skip it when

    • A one-click deploy with no stages; use the deploys screen.

    Installation #

    terminal
    pnpm dlx shadcn@latest add @caliper/rollout-screen

    Adds its 11 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 { RolloutScreen } from "@/components/ui/rollout-screen"

    The worked example comes with Pro

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

    Checking your licence…

    API reference #

    RolloutScreen

    component
    PropTypeDefaultDescription
    title *string—
    descriptionstring—
    version *string—
    value *number—Percent of traffic on the new version, 0 to 100.
    state *RolloutState—
    checkpointsreadonly number[][1, 5, 25, 50, 100]
    metrics *readonly RolloutMetric[]—
    regions *readonly RolloutRegion[]—
    events *readonly RolloutEvent[]—
    notestring—Why the rollout is paused, or any other line worth reading.
    bakeLeftnumber—Seconds left in the current bake.
    onValueChange((value: number) => void)—
    onPromote((next: number) => void)—Jump to the next checkpoint.
    onPause(() => void)—
    onResume(() => void)—
    onRollback(() => void)—
    onStart(() => void)—Begin from the first checkpoint.
    classNamestring—

    Accessibility #

    It exposes slider and status semantics, with aria-hidden, aria-label, aria-orientation, aria-valuemin, aria-valuemax and aria-valuenow kept in step with state. Changes that matter are announced through a live region.

    KeyBehaviour
    →Moves to the next item or value.
    ↑Moves to the previous item or value.
    ←Moves to the previous item or value.
    ↓Moves to the next item or value.
    PageUpMoves by a larger step, or to the previous page.
    PageDownMoves by a larger step, or to the next page.
    HomeJumps to the first item or the minimum.
    EndJumps to the last item or the maximum.

    Motion #

    It checks prefers-reduced-motion itself and settles immediately instead of travelling. Every state is still reachable.