shadcn.io is not affiliated with official shadcn/ui
Revenue Funnel Stats Block for Solid
A funnel as a real table for a sales team's pipeline: stage, deals, step conversion and value, each number with a thin bar to the scale of its column, and the overall conversion rolling in the header.
Installation
Overview
A revenue funnel for Solid with Ark UI. A start-aligned header counts the deals won out of the leads ("Closewell won 96 of 1,240 leads"), with the overall conversion rolling up at its end ("7.7% of leads closed as won"). Under it one framed table for a sales team's pipeline has five stages, from Lead to Closed won. Each row gives the stage, the deals that reached it, the share of the stage before that made it across, and what those deals are worth together; the three numbers each carry a thin bar drawn to the scale of their column, so the table reads as a funnel at a glance. A line under the table says how the numbers are worked out. Every share, bar, value and the headline are computed from the deals at each stage and the average deal size there. On a phone the value column drops and the other three stay. It's a native table with a caption and header scopes, built from Guides and SlidingNumber.
FAQ
How do I change the stages and the numbers?
Edit STAGES at the top of the file: each stage has a name, the number of deals that reached it and the average deal size there in dollars. The step conversion, the value (deals times average), every bar and the headline are computed from those. The overall conversion in the header is the last stage over the first.
Is it a real table, and the same on every library?
Yes. It is a native table with a visually hidden caption, column headers with scope="col" and the stage as a row header, so a screen reader announces "Qualified, Deals, 612". The markup is identical on every framework and every UI library, because the catalog's React Aria table is a grid without captions or scopes, and a native table gives all seven targets the same structure.
What do the bars show?
Each bar is drawn to the scale of its own column and is decoration: the number is always written next to it. Deals and value are drawn against the first stage, so they shrink down the table like a funnel. Step conversion is drawn against 100%, so a stage that keeps most of the stage before it has a long bar.
How does it fit on a phone?
The table drops its value column below 640 pixels and keeps stage, deals and step conversion with their bars, so nothing scrolls sideways at 320 pixels. The column widths are fixed, so a long stage name such as "Proposal sent" wraps rather than pushing the others. The overall conversion sits under the header text on a phone, on one line.
Is the block accessible?
Yes. Numbers are text and sit in bdi elements, the bars are hidden from assistive technology, the first stage's missing conversion is read as "First stage", and contrast passes in light and dark. The big conversion in the header rolls up once, and with reduced motion it simply shows its value.