Journey flow
ProPaths users take from one step to the next.
pnpm dlx shadcn@latest add @caliper/journey-flow| From to | Value |
|---|---|
| Visited to Signed up | 6100 |
| Visited to Left | 42100 |
| Signed up to Started trial | 3300 |
| Signed up to Left | 2800 |
| Started trial to Paid | 1020 |
| Started trial to Left | 2280 |
| Paid to Expanded | 310 |
| Paid to Left | 710 |
- Visited to Signed up12.7%
- Signed up to Started trial54.1%
- Started trial to Paid30.9%
- Paid to Expanded30.4%
- Start to finish0.6%
When to use #
Use it for
- Finding where people drift off.
Skip it when
- The journey is linear.
Installation #
pnpm dlx shadcn@latest add @caliper/journey-flow
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.
import { JourneyFlow } from "@/components/ui/journey-flow"
The worked example comes with Pro
The 10-line example behind the preview opens here with a Pro or Team licence.
API reference #
JourneyFlow
component
Accessibility #
It is built on native elements and keeps aria-label in step with state.
No custom key handling; Tab and the native activation keys do the work.
Motion #
It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.