shadcn.io is not affiliated with official shadcn/ui
Dropoff Rate Funnel Stats Block for Radix UI
A leak-first funnel for an onboarding tool: five steps, each a solid bar of who got that far followed by a hatched ghost of who was lost, the drop rate as the big figure, and the biggest leak ringed with a badge.
Installation
Overview
A drop-off funnel for React with Radix UI. A centred header names the step that loses the most new users ("59% of new users stop at "Invited a teammate"") and says how many of those who signed up reached the end. Under it one framed list of five first-run steps for an onboarding tool. Each row is a step, a solid bar as wide as the share of sign-ups who got that far, and straight after the bar a hatched ghost as wide as the people lost since the step before, so the loss has a width of its own. The drop rate is the large figure at the end of the row ("−28%"), under the bar on a phone. The row with the biggest leak carries a ring and a "Biggest leak" badge. A caption row explains solid and hatched. The bars, ghosts, rates and the headline are computed from the count at each step, so the drawing and the text can't disagree. It's built from Badge and Guides, with the bars in your theme's foreground colour.
FAQ
How do I change the steps and the counts?
Edit FLOW at the top of the file: each step is a name and the count of people who reached it. The bar widths, the ghosts, every drop rate, the share that stayed to the end, the badge and the headline are computed from those counts. Add or remove a step and the list, the numbering and the biggest leak follow. Steps are expected to shrink: a count above the step before would draw a negative ghost.
What is the hatched ghost?
It is the width that was lost. Every bar is drawn as a share of the first step, so a step's solid bar ends where its count ends, and the hatched ghost runs from there to where the step before ended. The ghost's width is the drop, which makes a big leak a wide hatch you can see before you read the number. The hatching is a foreground colour at a low weight, so it works in light and dark themes and every preset.
How is the biggest leak chosen, and why no amber?
It is the step that lost the largest share of the step before it, not the largest number of people. If two steps tie, both are ringed. It is marked with a ring and a badge, never with colour: a warning colour would be wrong in some themes and would say nothing to a reader who can't see it. The state is the ring, the word "Biggest leak" and the number.
Is the funnel accessible?
Yes. The steps are an ordered list with a heading for each step, and the count and the drop are plain text ("3,210 users", "minus 59% lost at this step"). The bars and their ghosts are decorative and hidden from assistive technology because the text says the same thing. Contrast of the text and the ring passes in light and dark. The drop figure is written with a true minus sign and sits in its own direction box, so a right-to-left page doesn't move the sign.
How does it fit on a phone?
Each row stacks: the step and its count on one line, the bar under it, and the drop rate under the bar ("−59% lost at this step"). The bars keep their scale at any width, and nothing scrolls sideways at 320 pixels. The bars run from the start of the line in every language, because time flows one way in a funnel, so the box is always left to right.