Conversion funnel
ProStages with counts and the drop-off between each.
pnpm dlx shadcn@latest add @caliper/conversion-funnel2.1% of visitors reach paid. The biggest drop is between Visited and Signed up: 42,100 people (87%).
- Visited48,200100.0% of start▲ 9.3% against the previous period
- Signed up6,10012.7% of start · 13% of previous▲ 17.3% against the previous period
- Started trial3,3006.8% of start · 54% of previous▲ 13.8% against the previous period
- Paid1,0202.1% of start · 31% of previous▲ 18.6% against the previous period
| Step | Everyone | Paid ads | Organic |
|---|---|---|---|
| Visited | 48200 | 12400 | 35800 |
| Signed up | 6100 | 1500 | 4600 |
| Started trial | 3300 | 700 | 2600 |
| Paid | 1020 | 150 | 870 |
When to use #
Use it for
- Reviewing where visitors leave a flow.
Skip it when
- The stages do not follow in order.
Installation #
pnpm dlx shadcn@latest add @caliper/conversion-funnel
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 { ConversionFunnel } from "@/components/ui/conversion-funnel"
The worked example comes with Pro
The 17-line example behind the preview opens here with a Pro or Team licence.
API reference #
ConversionFunnel
component
Accessibility #
It exposes status and img semantics, with aria-label and aria-busy kept in step with state. Changes that matter are announced through a live region.
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.