Funnel chart

Signup funnel
Stage	Value	Of first	Of previous
Visited	12000	100.0%	—
Started signup	4200	35.0%	35.0%
Verified email	2900	24.2%	69.0%
Subscribed	840	7.0%	29.0%

When to use #

Use it for

Conversion and signup flows.
Any sequence where each step loses some.

Skip it when

Stages that are not strictly ordered.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/funnel-chart.json

Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { FunnelChart } from "@/components/ui/funnel-chart"

export function SignupFunnel() {
  return (
    <div className="w-full max-w-md">
      <FunnelChart
        label="Signup funnel"
        data={[
          { id: "visit", label: "Visited", value: 12000 },
          { id: "start", label: "Started signup", value: 4200 },
          { id: "verify", label: "Verified email", value: 2900 },
          { id: "paid", label: "Subscribed", value: 840 },
        ]}
      />
    </div>
  );
}

API reference #

FunnelChart

component

PropTypeDefault

label *string—

data *readonly FunnelStage[]—

unitstring""

formatValue((value: number) => string)numberText

loadingboolean—

errorstring—

classNamestring—

It exposes group and status semantics, with aria-label, aria-busy, aria-pressed and aria-hidden 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.