shadcn.io is not affiliated with official shadcn/ui
Funnel Awards Block for React Aria
A selection funnel for a hiring-pipeline tool: five stages from entries to winner as clip-path trapezoids on a log scale, each with its count and how many of the stage before went through.
Installation
Overview
A selection funnel for React with React Aria. A centred header sits above a framed figure holding an ordered list of five stages of the Cinderford Prize: entries, longlist, shortlist, finalists and the winner. Each row has a trapezoid of the funnel at the start, whose width follows the stage's count and which narrows into the next, and beside it the stage's name as a heading, its count in large type and how many of the stage before went through ("60 of 480, 12.5%"). The tone deepens from the widest stage to the winner. Widths run on a log scale, named in the caption, so the last stages stay visible. On a phone the drawing shrinks and the rows keep their text. It's built from Guides, clip-path shapes and your theme's tokens. The Cinderford Prize and its stages are made up for the example.
FAQ
How do I change the stages?
Edit STAGES at the top of the file, widest first: each stage has an id, a name and a count. Every rate ("60 of 480, 12.5%"), every width, the header's headline number and the caption are made from that list, so there are no percentages to keep in step. Add a stage and the funnel gains a row, a trapezoid and a tone; add a tone to TONES if you go past five.
Why a log scale?
From 2,400 entries to one winner, a linear scale would draw every stage after the first as a sliver. The widths follow the logarithm of each count, with a small floor so the last stage can still be seen, and the caption says so. The numbers beside each row are exact; only the drawing is compressed.
What does each rate mean?
It's how many of the stage before reached this one, with both numbers shown: "60 of 480, 12.5%" says that 60 of the 480 on the longlist made the shortlist. The first row has no stage before it. The rates are derived, so changing a count changes them.
How do screen readers read the funnel?
The stages are an ordered list named after the prize and the year. Each item has the stage as a heading, its count and the rate written out. The trapezoids are a drawing hidden from assistive technology and carry nothing the text doesn't. Counts sit in bdi elements so they keep their order in a right-to-left layout; the funnel is symmetric and stays as drawn.