caliper uidocs
DemoSign inGet Pro

Product tour

Pro

A guided tour that spotlights one real control at a time, with a card that finds the side with room, keeps your place when paused, resumes from a small chip, and says so when a control is not on screen. Coachmark is the one-off hint.

Installs components/ui/product-tour.tsxDepends on @radix-ui/react-popover, @radix-ui/react-slot, lucide-reactMotion honours reduced motion
pnpm dlx shadcn@latest add @caliper/product-tour
Workspace content

When to use #

Use it for

  • First run of a product, or after a redesign moves things.
  • Pointing out one new control without a full tour.

Skip it when

  • Teaching a whole workflow; use an onboarding checklist that people complete for real.

Installation #

terminal
pnpm dlx shadcn@latest add @caliper/product-tour

Adds its 4 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 ProductTour, TourResume and Coachmark.

example.tsx
import { ProductTour, TourResume, Coachmark } from "@/components/ui/product-tour"

The worked example comes with Pro

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

Checking your licence…

API reference #

ProductTour

component
PropTypeDefaultDescription
steps *readonly TourStep[]—
open *boolean—
onOpenChange *(open: boolean) => void—Escape and the close button call this with false; the step is kept for resuming.
stepnumber—
onStepChange((step: number) => void)—
onFinish(() => void)—
labelstring"Tour"Names the tour for assistive technology, e.g. "Getting started".

TourResume

component
PropTypeDefault
step *number—
total *number—
onResume *() => void—
onDismiss(() => void)—
classNamestring—

Coachmark

component
PropTypeDefault
title *string—
body *ReactNode—
open *boolean—
onOpenChange *(open: boolean) => void—
onDismiss *() => void—
side"left" | "right" | "top" | "bottom""bottom"
children *ReactNode—
classNamestring—

Accessibility #

It exposes dialog and status semantics, with aria-hidden, aria-modal, aria-label, aria-describedby, aria-live 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.
→Moves to the next item or value.
←Moves to the previous item or value.

Motion #

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