Spark UI
Back to UI Kit

Conversion Ladder

A horizontal pill-bar funnel that scales each stage against the first to show drop-off at a glance.

Interactive Stage Preview

Customize

8 options
Accent Color
Stages
4
Stage Retention
68
Bar Height
14
Corner Radius
8
Percent Labels
Fade Stages
Animation Speed
100

Get this component

Copies the component into your project, installs what it needs, and pulls down its images. Nothing to download by hand.

npx spark-ui-registry@latest add mono-stage-funnel

Writes to components/spark-ui/ by default; override with --dir. The file is yours to edit; there is no package to keep in sync.

Or let an AI agent pull it in for you. Set up the MCP server
PropertyTypeDefaultDescription
theme'dark' | 'light''dark'Colour scheme of the card.
compactbooleanfalseShrinks the card to a smaller fixed height.
colorstring (hex)'#ff8a3d'Primary series color.
stagesnumber4Number of steps in the funnel.
retentionnumber68Percentage of users kept from one stage to the next.
barHeightnumber14Height of each stage bar in pixels.
radiusnumber8Rounding on each bar's end.
showPercentbooleantrueShow each stage's percentage beside its bar.
fadebooleanfalseLighten each later stage.
speednumber100Playback speed of entry and transition animations, as a percentage.