073
A conversion funnel where each bar keeps a hatched ghost of what the step before had, so drop-off reads at a glance; flip between counts and percentages and hover a step for its channel split.
akafunnel·conversion·drop-off
Run this in any project set up for the shadcn CLI. It copies the Funnel source into your components folder, so the code is yours to change.
npx shadcn@latest add https://devl.dev/r/funnel.jsonImport it and render it. Every prop has a typed default, so it works straight away, and you pass your own data when you’re ready.
import { Funnel } from "@/components/funnel";
export default function Page() {
return <Funnel />;
}A free React component in the Numbers collection, written in TypeScript with Tailwind CSS on coss ui. MIT licensed.
Read from the Funnel source. Everything is optional unless it says required.
| Prop | Type | Default |
|---|---|---|
| title | string | "Signup funnel" |
| caption | string | "Last 30 days" |
| steps | FunnelStep[] | defaultSteps |
| defaultMode | FunnelMode | "count" |
| segmentColors | string[] | SEGMENT_COLORS |
| locale | string | "en-US" |
| className | string | — |