A conversion funnel of centered trapezoid stages with absolute values, share of the first stage and the drop-off between stages.
npx shadcn@latest add https://hyperblur.dev/r/funnel-chart.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/funnel-chart.tsx.
import { FunnelChart } from "@/components/hyperblur/funnel-chart"
<FunnelChart stages={[{ label: "Visitors", value: 48200 }, { label: "Sign-ups", value: 14600 }, { label: "Paid", value: 1260 }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| stages | { label: string; value: number; color?: string }[] | five sample stages | Stages from top to bottom. Percentages are measured against the first stage. |
| colors | string[] | ["#2f7bff", "#4d86ff", "#6a8ffa", "#8b8cf6", "#8b5cf6", "#34d399"] | Fill per stage, in order. Used when a stage has no color. |
| stageHeight | number | 34 | Height of each stage row in viewBox units. |
| valueFormatter | (n: number) => string | Formats the absolute values. Defaults to grouped digits. | |
| animate | boolean | true | Grow the stages in one after another on mount. |