Funnel Chart
A conversion funnel: each stage narrows in proportion to its value, with the step-to-step conversion rate and the drop-off called out between stages.
- Category: React Chart and Data Table Components
- Licence: Free, MIT
- Built with: React 19, Tailwind CSS 4, Motion
- Dependencies: motion, clsx, tailwind-merge
Examples
Funnel Chart
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
stages | { label: string; value: number }[] | — | |
format | (v: number) => string | — |
About Funnel Chart
Funnel Chart narrows each stage in proportion to its value, then calls out the step-to-step conversion rate and the drop-off between stages, so the leak in your funnel is obvious at a glance.
Funnel Chart is an animated chart for React 19, styled with Tailwind CSS 4 and animated with Motion. It drops into Next.js, Vite, Remix or Astro through the shadcn CLI as a single file you own.
When to use Funnel Chart
- Sign-up and checkout funnels.
- Sales pipeline stages.
- Onboarding completion.
- Marketing campaign reports.
How it works
Stages animate their width on a stagger as the chart enters. Rates are calculated from your values and formatted by a function you pass, and every stage is listed in text for screen readers.
Each chart has a text alternative, hover tooltips are mirrored by keyboard focus where data points are interactive, and colour is never the only way a value is shown. With prefers-reduced-motion on, it holds still or settles instantly instead of animating.
Customizing Funnel Chart
Every prop is documented in the API reference above with its type and default. The ones you will reach for first are listed here.
Style it with className like any other element. It only uses your theme's tokens, so it follows light and dark mode without extra work.
- stages.
- format ((v: number) => string).
Goes well with Funnel Chart
These charts pieces share its tokens and motion language, so they sit together on one page without clashing.
- Bar Chart: An animated React bar chart that springs up in sequence with an accessible table
- Uptime Bar: A React status page uptime bar with a tooltip for every day
- Donut Chart: An animated React donut chart: segments draw in and thicken on hover
- Activity Heatmap: A React contribution heatmap with four shades, tooltips and keyboard navigation
- Sparkline: An animated React sparkline with fill, trend colour and a pulsing end dot
Install Funnel Chart
npx shadcn@latest add https://charcoalui.com/r/funnel-chart.jsonFunnel Chart is free and MIT licensed. The command copies funnel-chart.tsx into components/ui and installs clsx, tailwind-merge; you can also copy the source from the Code tab by hand.
Charcoal UI Pro adds 393 more showpiece components, 112 sections and 100 templates built the same way.
Frequently asked questions
- How do I install Funnel Chart?
- Run npx shadcn@latest add https://charcoalui.com/r/funnel-chart.json. The shadcn CLI copies funnel-chart.tsx into components/ui and installs motion, clsx, tailwind-merge. You can also copy the source from this page by hand.
- Is Funnel Chart free for commercial use?
- Yes. Funnel Chart is MIT licensed: use it in any personal or commercial project and change it however you like.
- Does Funnel Chart work with Next.js?
- Yes. It is a client component for React 19 styled with Tailwind CSS 4, so it works in the Next.js App Router and Pages Router, Vite, Remix and Astro.
- Can an AI coding agent install Funnel Chart?
- Yes. Connect the Charcoal UI MCP server (https://charcoalui.com/mcp) to Claude Code, Cursor or any MCP client; get_component returns Funnel Chart's props and source and get_install_command returns the exact command.