shadcn.io is not affiliated with official shadcn/ui
Conversion Funnel Kanban Block for Radix UI
A four-lane signup funnel of eight audience batches, where each lane head works out how many people reached the stage and the rate from the stage before, and batches move one stage at a time.
Installation
Overview
Read a signup funnel as a board with this conversion tracker for React with Radix UI. A hairline frame with a plus mark on each corner holds four lanes that share their lines (Visited, Signed up, Started a trial and Paying) and eight audience batches. A batch sits in the furthest stage it reached; its card shows the head count and a bar for its share of everyone on the board. Each lane head works out how many people reached its stage, the people in it and in every later lane, and the share of those who reached the stage before that went on, in whole percent, so the rates change when a batch moves. The sentence under the heading gives the overall rate to one decimal. A batch can't skip a stage on the way forward, and the refusal says which stage is next; it can step back. A card moves by dragging its grip, from the keyboard, or from its Dropdown Menu under "Move to"; a polite status line in the foot reports each change and Reset puts the funnel back. The frame is ruled by Guides. For growth teams, sales pipelines and any process with stages that people drop out of.
FAQ
How are the rates worked out?
reachedAt adds the people in a lane and in every later lane, and rateAt divides that by the people who reached the stage before, rounded to a whole percent. Nothing is typed: move a batch and every lane head recalculates. The overall rate in the sentence uses whole numbers only (tenthsWord turns tenths into "1.7%"), so there is no floating point to disagree between the server and the browser.
Why can't a batch skip a stage?
A funnel counts people who passed each stage, so jumping ahead would hide the stage in between. The function refusalOf refuses a forward move of more than one lane and names the stage to use first. Moving back is allowed, for example when a trial lapses. Edit the function to allow skips.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with the card's title. Press Space or Enter to pick it up, then ArrowUp and ArrowDown to change its place, ArrowLeft and ArrowRight to go to the neighbouring column (the arrows swap in right-to-left languages), Home and End for the first and last place, Space or Enter to drop it and Escape to put it back. Every step is announced in the status line, with the column and the position.
Why is there a menu as well as the grip?
Dragging needs a held pointer and a path, which not everyone has, so each card also has a "More actions" menu with a "Move to" choice for every column and the current one ticked. Choosing one moves the card, puts focus on the card in its new place and says so in the status line.
What stays in the demo, and how do I save the moves?
Everything: the moves live in the component's state, nothing is sent anywhere, and a reload or Reset brings back the starting board. To save for real, drive the batches from your analytics API and call it from put if a move should be written back; the lane heads recalculate from the batches either way. The names and figures are made up.
How does it work on a phone?
The board is a sideways scroll region with the next column showing, and each column scrolls up and down inside the board's fixed height, so the page never jumps. Touch drags from the grip only, so the rest of a card still scrolls the board; the menu is the other way to move a card. The status line is still read out to screen readers.