Funnel Chart
A conversion funnel: stepped bars with drop-off between stages, toggle counts or percent, and tap a stage for detail.
funnel-chart.tsxfunnel-chart.css
Checking access…
Overview
Each stage is a centred bar scaled to its count. Between stages the drop-off is stated as a number and a percent, which is what people actually read a funnel for.
Selecting a stage shows conversion from the top and from the previous step.
When to use
- Product analytics, checkout and signup reports.
When not to use
- Non-sequential steps: use bars.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/funnel-chart.json$
npx shadcn@latest add https://sundaeui.dev/r/funnel-chart.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/funnel-chart.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/funnel-chart.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy funnel-chart.tsx and funnel-chart.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { FunnelChart } from '@/components/sundae/funnel-chart'
<FunnelChart />Props
| Prop | Type | Default |
|---|---|---|
stages*Stages top to bottom. | { name: string; value: number }[] | — |
unitLabel mode. | 'count' | 'percent' | 'count' |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- Stages are a list of buttons with value and conversion in the label.
- The chart shape is decorative; numbers are text.
- Reduced motion removes the movement and keeps every state change.
Customization
- Colours are CSS custom properties on .sd-fnl; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
FAQ
- Is Funnel Chart free?
- Funnel Chart is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Funnel Chart?
- Run npx shadcn@latest add https://sundaeui.dev/r/funnel-chart.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Funnel Chart support keyboard and screen readers?
- Stages are a list of buttons with value and conversion in the label. The chart shape is decorative; numbers are text.
- Does Funnel Chart respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All data →Stacked Bars
Data · Refined- Pro
Scrub Sparkline
Data · Refined - Pro
Scatter Plot
Data · Refined - Pro
Tick Gauge
Data · Refined - Pro
Donut Breakdown
Data · Refined - Pro
Range Line Chart
Data · Refined