dashboardcn

Search documentation

Search for a page or component.

Funnel Chart

PreviousNext

Step-by-step conversion, as stacked bars with drop-off or as a flow of tapering stages with a tile per step.

1Visited pricing12,480100%
60.6% drop-off
2Started signup4,92039.4%
26.6% drop-off
3Verified email3,61028.9%
40.7% drop-off
4Created workspace2,14017.1%
80.7% drop-off
5Upgraded to Pro4123.3%
Overall conversion3.3%
import { FunnelChart } from "@/components/ui/funnel-chart"

const steps = [

A conversion funnel for shadcn/ui: each step as a bar, the drop-off between steps, and overall conversion at the end. It is plain HTML rather than SVG, which keeps it easy to restyle and accessible by default.

Installation

pnpm dlx shadcn@latest add @dashboardcn/funnel-chart

Usage

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

<FunnelChart
  steps={[
    { name: "Visited pricing", value: 12480 },
    { name: "Started signup", value: 4920 },
    { name: "Upgraded to Pro", value: 412 },
  ]}
/>

<FunnelChart
  variant="flow"
  steps={[
    { name: "Link opened", value: 197, color: "var(--color-lime-400)" },
    { name: "Started", value: 110, color: "var(--color-blue-500)" },
    { name: "Converted", value: 38, color: "var(--color-pink-500)" },
  ]}
/>

Examples

Flow

Set variant to "flow" to run the steps left to right, each sized to its share of the first and tapering into the next. Give each step a color, or none for the chart palette. Hover a stage to focus it.

100%
56%
39%
19%
Link opened197
Started110
Completed77
Converted38
import { FunnelChart } from "@/components/ui/funnel-chart"

const steps = [

Sharp and single color

shape="sharp" draws straight trapezoids. A single color fades from stage to stage, so pass the foreground for a one-ink funnel. height sets the stage height in pixels.

100%
34%
8%
1%
1%
Applied1,240
Screened420
Phone96
Offer18
Hired11
import { FunnelChart } from "@/components/ui/funnel-chart"

const steps = [