Funnel chart React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Funnel chart is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import FunnelChart from @/components/ui/funnel-chart.

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

const pipeline = [
  { id: "lead", label: "Leads", value: 1240 },
  { id: "qualified", label: "Qualified", value: 620 },
  { id: "proposal", label: "Proposal sent", value: 248 },
  { id: "negotiation", label: "Negotiation", value: 96 },
  { id: "won", label: "Won", value: 41 },
]

export function SalesPipeline() {
  return (
    <FunnelChart
      steps={pipeline}
      locale="en-US"
      label="Sales pipeline, September 2026"
      labels={{
        conversion: (pct, { reference }) => `${pct} of ${reference.toLowerCase()}`,
        dropoff: (pct, lost) => `${pct} · ${lost} lost`,
      }}
      onValueChange={(id) => console.log(id)}
    />
  )
}

Props

• steps*
  FunnelStep[] = { id: string; label: ReactNode; value: number; description?: ReactNode; name?: string; color?: string }[]

  The steps in order, from the widest to the narrowest. name is the plain-text name when label is not a string; description is a quieter second line; color (a palette slot "series-3", a tone or any CSS color) overrides the fill of that step. Negative values draw as 0.

• variantdefault "bars"
  "bars" | "funnel"

  bars: one aligned row per step with every number printed (the readable default and the phone layout). funnel: a tapered shape of trapezoids with the labels beside it.

• orientationdefault "vertical"
  "vertical" | "horizontal"

  Funnel variant: top to bottom, or left to right with the labels above each step. Horizontal falls back to vertical when the chart is narrower than 480px.

• curvedefault "linear"
  "linear" | "smooth"

  Funnel variant: straight trapezoid sides, or smooth S-curves from one step's width to the next.

• baselinedefault "first"
  "first" | "previous"

  What the conversion percent is measured against: the first step ("3.3% of leads") or the step before it (step-to-step conversion; the first step then shows none).

• showConversiondefault true
  boolean

  The conversion percent next to each value.

• showDropoffdefault true
  boolean

  The chip between steps: how much of the previous step was lost, in percent and in units. A step larger than the one before shows a gain instead.

• dropoffThresholddefault 10
  number

  Drop-offs from this percent up are printed in the danger text color; smaller ones and gains stay calm. 0 turns the danger color off (every chip muted).

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  The fill of the bars and segments. Neutral is the foreground ink (black in light mode, white in dark mode).

• colordefault ""
  string

  Any CSS color for the fill; replaces the tone. Empty uses the tone.

• stepColorsdefault false
  boolean

  Paint each step in its own chart palette slot (series-1, series-2...) instead of one tone.

• sizedefault "md"
  "sm" | "md" | "lg"

  Bars: track 8 / 12 / 16px, row spacing and text size. Funnel: 200 / 280 / 360px tall.

• radiusdefault "full"
  "none" | "sm" | "md" | "full"

  The corners of the bars and their tracks (bars variant).

• value
  string | null

  The selected step id when you control it: the other steps fade to 55%. null clears.

• defaultValuedefault "null"
  string | null

  The step id selected at first, uncontrolled.

• onValueChange
  (id: string | null) => void

  Called when a step is selected or cleared. Passing it (or onStepClick) turns the rows into buttons.

• onStepClick
  (step: FunnelStep, index: number) => void

  Called when a step is clicked, tapped or activated with Enter / Space, e.g. to open the deals in that stage.

• valueFormatdefault "number"
  ChartValueFormat = "number" | "compact" | "currency" | "percent"

  How the step values print in the rows, the readout and the table. Percent takes whole numbers (12.4 -> "12,4 %").

• currencydefault "USD"
  string

  ISO 4217 code for valueFormat currency, printed with the narrow symbol ("$128,450").

• decimalsdefault 0
  number

  Fraction digits for values; auto by magnitude when unset (Auto in the playground): 0 for counts, 1 for percent values.

• formatValue
  (value: number, context: { series: string; kind: "label" | "tooltip" | "table" }) => string

  Replaces the built-in value formatting everywhere (series is the step id), e.g. compact dollars on the rows and full amounts in the table.

• localedefault ""
  string

  Locale for numbers and percents. Empty uses the UIProvider / LocaleProvider locale.

• showTooltipdefault true
  boolean

  Funnel variant: the readout beside a hovered or keyboard-inspected step (pinned above the chart on touch). Bars print every number and need none.

• animateddefault true
  boolean

  Bars grow and counts tick up on first view, the funnel is revealed top to bottom, and changes glide. Reduced motion always shows the final state.

• loadingdefault false
  boolean

  Skeleton rows (or a skeleton funnel) in the shape of the chart.

• emptyState
  ReactNode

  Replaces the built-in empty state (shown when steps is empty).

• labeldefault ""
  string

  Accessible name of the figure (followed by the overall conversion) and caption of its data table. Empty joins the step names.

• descriptiondefault ""
  string

  A one-sentence takeaway for screen readers ("The biggest loss is at the proposal stage").

• labels
  Partial<FunnelChartLabels>

  Strings: empty, loading, inspectHint, selected (appended to the funnel's live readout on the selected step), stepHeader / valueHeader / conversionHeader / dropoffHeader / gainHeader (table and readout), and the functions conversion ((pct, { baseline, reference }) => "50.0% of first"), dropoff ((pct, lost) => "50.0% drop-off, 620 lost"), gain ((pct, gained) => ...), step ((label, value, conversion, change) => the screen reader text) and figure ((label, overall) => ...).

• classNames
  Partial<Record<FunnelChartSlot, string>>

  Classes for list, step, header, label, description, value, conversion, track, bar, dropoff (bars), svg, segment, stepLabel, tooltip, inspect (funnel) and table.

Parts

FAQ

Used in

More React chart and stat components