Funnel chartPro
Conversion funnel with overall and step-to-step rates.
Signup funnel · last 30 days
- Visited48,210100.0%
- Signed up6,12012.7%(13%)
- Activated3,4807.2%(57%)
- Invited team1,2102.5%(35%)
- Paid4861.0%(40%)
When to use
- Conversion through ordered steps: visit → sign up → pay.
When not to use
- Unordered categories: use a bar chart.
Installation
Usage
Import it from @/components/ui/funnel-chart after installing.
example.tsx
import { FunnelChart } from "@/components/ui/funnel-chart";
export function Signup() {
return <FunnelChart steps={[{ label: "Visited", value: 12000 }, { label: "Signed up", value: 1800 }, { label: "Paid", value: 240 }]} />;
}API reference
FunnelChart
Bars sized to the first step, with step-to-step drop-off.
| Prop | Type | Default | Description |
|---|---|---|---|
| steps | { label; value }[] | – | Steps in order. |
| color | string | var(--chart-1) | Bar color. |
Accessibility
- Every step prints its value and conversion as text.
Motion
- Bars grow in sequence.
Responsive behavior
- Labels stack above bars on phones.
Performance
- Static after mount.
Notes for AI
- Values should decrease; the chart doesn't sort.
This page as Markdown, for assistants and coding agents:
/components/funnel-chart/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt