ComponentsCharts

Funnel

Stage-by-stage conversion as aligned bars: each stage's value, conversion from the previous stage, drop-off, overall rate and an optional amount. Columns in a wide container, rows in a narrow one. Plain DOM — no chart library.

charts/funnel.tsxtheme · material · accent · density · font

Leads: 1,240
Qualified: 612 (49% of Leads)
Meeting held: 318 (52% of Qualified)
Proposal: 205 (64% of Meeting held)
Won: 84 (41% of Proposal)

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { Funnel } from "@vamos-ui/react/charts";

<Funnel title="Sales pipeline" steps={[
  { key: "leads", label: "Leads", value: 1240 },
  { key: "won", label: "Won", value: 84 },
]} />

Each stage reads as one sentence: "Proposal: 205 (34% of Qualified)".

Drop-off is muted, not red — losing leads between stages is normal.

A stage larger than the one before logs a development warning but still renders.

Examples

Value per stage

amount per stage, written compact ("$2.1M").

Qualified: 612, $4.9M
Proposal: 205 (33% of Qualified), $2.1M
Negotiation: 117 (57% of Proposal), $1.4M
Won: 84 (72% of Negotiation), $962K

Vs previous period (site)

compareTo adds a marker at last period's size and the change in conversion, in points.

Visited pricing: 18,420
Started checkout: 2,310 (13% of Visited pricing), +1.5 pt vs previous period
Entered card: 1,204 (52% of Started checkout), −4.7 pt vs previous period
Paid: 962 (80% of Entered card), +5.5 pt vs previous period

Rows, clickable (HR)

orientation="vertical" for narrow panels; onStepClick makes each stage a button.

Pick a stage to filter the candidate list.

API

Funnel

Prop	Type	Default
`steps` Stages in order.	`{ key, label, value, amount?, href? }[]`	`—`
`title` Accessible name of the list.	`string`	`—`
`orientation` Columns (rows below a 36rem container) or always rows.	`"horizontal" \| "vertical"`	`"horizontal"`
`show` Metrics under each stage.	`("conversion" \| "overall" \| "dropoff")[]`	`["conversion", "dropoff"]`
`format` Stage value format.	`FormatSpec`	`"integer"`
`amountFormat` Amount format (compact under the bar, full in the stage sentence).	`FormatSpec`	`"currency"`
`color` Base colour; later stages fade toward the surface.	`ChartColor`	`"chart-1"`
`compareTo` Same stages for a previous period.	`FunnelStep[]`	`—`
`onStepClick` Stages become buttons; stages with href are links.	`(step) => void`	`—`
`size` Bar thickness.	`"sm" \| "md"`	`"md"`
`loading` Stepped skeleton.	`boolean`	`—`
`labels` funnel namespace: stage, stageWithConversion, conversion, overall, dropoff, compare, points.	`Partial<FunnelLabels>`	`—`

Formatted inputs

Gallery section