Funnel Chart · paneui

Signup funnel data
Stage	Value (users)	Of first	Of previous
Visited pricing	18,420	100.0%	100.0%
Started signup	6,210	33.7%	33.7%
Verified email	4,870	26.4%	78.4%
Began trial	2,390	13.0%	49.1%
Upgraded	612	3.3%	25.6%

Installation

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

Usage

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

<FunnelChart
  label="Signup funnel"
  unit="users"
  stages={[
    { id: "visit", label: "Visited", value: 18420 },
    { id: "signup", label: "Signed up", value: 6210 },
    { id: "paid", label: "Upgraded", value: 612 },
  ]}
/>

Examples

Single Color

Horizontal

Descriptions

Keyboard

Each stage is a tab stop; the arrow keys along the funnel's direction move to the next or previous stage. The tooltip shows share of the first stage, conversion from the previous one and the drop-off.

API Reference

FunnelChart

Also accepts every prop of section.

stages*: { id: string; label: string; value: number; color?: string; description?: string }[]; Stages from top to bottom. Duplicate ids and negative values are skipped.
direction= "vertical": "vertical" | "horizontal"; Vertical stacks rows with a values column; horizontal flows left to right with a label row.
label= "Funnel": string; Accessible name.
unit: string; Noun after values in the tooltip.
formatValue= formatNumber: (value: number) => string; Formats stage values.
size= 56 vertical / 220 horizontal: number; Vertical: height of each stage row. Horizontal: plot height.
gap= 4: number; Gap between stages in px.
color: string; One colour for every stage, fading toward the background by depth (readable in light and dark).
minRatio= 0.08: number; Smallest drawn thickness as a fraction of the largest stage.
activeId: string | null; Controlled highlighted stage.
defaultActiveId: string | null; Initially highlighted stage.
onActiveChange: (id: string | null) => void; Called when the highlighted stage changes.

Prop	Type	Default	Description
stages*	{ id: string; label: string; value: number; color?: string; description?: string }[]	—	Stages from top to bottom. Duplicate ids and negative values are skipped.
direction	"vertical" \| "horizontal"	"vertical"	Vertical stacks rows with a values column; horizontal flows left to right with a label row.
label	string	"Funnel"	Accessible name.
unit	string	—	Noun after values in the tooltip.
formatValue	(value: number) => string	formatNumber	Formats stage values.
size	number	56 vertical / 220 horizontal	Vertical: height of each stage row. Horizontal: plot height.
gap	number	4	Gap between stages in px.
color	string	—	One colour for every stage, fading toward the background by depth (readable in light and dark).
minRatio	number	0.08	Smallest drawn thickness as a fraction of the largest stage.
activeId	string \| null	—	Controlled highlighted stage.
defaultActiveId	string \| null	—	Initially highlighted stage.
onActiveChange	(id: string \| null) => void	—	Called when the highlighted stage changes.