Spark UI
Back to UI Kit

Flow Funnel

A tapered conversion funnel with particles flowing through each stage and dropping out where users churn.

Interactive Stage Preview

Customize

5 options
Accent Color
Stages
5
Particles
42
Step Rates
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 flow-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'Band and particle color.
stagesnumber5Number of funnel stages.
particlesnumber42Number of flowing particles.
showRatesbooleantrueShow conversion rate per stage.
speednumber100Playback speed of entry and transition animations, as a percentage.