Funnel

Conversion through ordered stages, with both the overall rate and the step rate. A funnel showing only the overall rate hides which single step is losing people.

src/components/ui/funnel.tsx

About

From the component's own source, where it was written.

Conversion through ordered stages.

Two rates per stage, and the distinction matters more than the picture: *overall* is against the first stage, *step* is against the one immediately before. A funnel showing only the overall rate hides which single step is losing people, which is the entire question a funnel is built to answer.

Bar width is proportional to the count rather than to the step rate, so the shape reflects volume. A stage keeping 90% of a tiny cohort should not look wider than one keeping 40% of everyone.

Install

npx astralyx-ui add funnel

Usage

import { Funnel } from '@/components/ui/funnel'

<Funnel stages={stages} />

Composer

Change the props and the source below follows.

Visited pricing12,480100%
Started trial3,12025%
25% from previous · 9,360 dropped
Invited a teammate1,49012%
48% from previous · 1,630 dropped
Converted6205%
42% from previous · 870 dropped

Props

showStepRate

tsx

<Funnel stages={stages} showStepRate={true} />

Examples

Signup funnel

tsx

<Funnel stages={stages} />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`Funnel`

Conversion through ordered stages.

Extends Omit<ComponentProps<'ol'>, 'children'>.

Prop	Type	Default	Description
color	string	'var(--blue)'	—
stages	FunnelStage[]	required	`{ label, value, hint? }`, in order.
showStepRate	boolean	true	Adds the rate against the previous stage and how many dropped.
format	(value: number) => string	DEFAULT_FORMAT	—
width	volume	—	Proportional to the count, not the step rate — a stage keeping 90% of a tiny cohort should not look wider than one keeping 40% of everyone.

Types

`FunnelStage`

Field	Type	Description
label	ReactNode	—
value	number	—
hint?	ReactNode	—