shadcn.io is not affiliated with official shadcn/ui
Stage Icons Funnel Stats Block for Solid
A column funnel for a signup-flow analyser: five columns shrinking from the start to the end on a baseline, an icon plate under each as the step's node, and the share that made it across between two nodes.
Installation
Overview
A column funnel for Solid with Ark UI. A start-aligned header says what share of visitors finish signing up ("22% of visitors finish signing up") and over what period. Under it one framed figure, with a + on each corner, draws five columns standing on a baseline and shrinking from the first step to the last, each as tall as the share of visitors who reached it, with the count above it and the fill deepening towards the outcome. Under the baseline every step is a node: a round plate holding the step's icon (a pointer for the landing page, a pen for the form, a mail for the email check, a person for the profile, a card for the plan), with its name under it. A hairline joins the nodes, and on it, between two nodes, sits the share of the step before that made it across ("65%"). The last node, the outcome, is filled. The heights, conversions and headline are computed from the counts at each step. The five columns stay side by side on a phone. It's built from Guides and lucide icons, with every fill a weight of your theme's foreground colour.
FAQ
How do I change the steps, their icons and the counts?
Edit FLOW at the top of the file. A step is a count, an icon (any lucide icon), a short name for the column, a note that completes the sentence screen readers hear ("18,400 visitors reached the signup page"), a fill (a weight of the foreground) and an entrance delay. Heights, the heads, the conversions and the headline are computed from the counts. Keep names short, one word where you can: five columns share the width of a phone.
What does the percentage between two nodes mean?
It is the share of the step before that reached the next one: "65%" between Landing and Form means 65% of the people who landed started the form. It is not the share of everyone, which is the height of the column. The overall conversion, the last column over the first, is in the header.
Is it accessible?
Yes. The steps are an ordered list; each has a heading, and a sentence only screen readers hear gives its count and conversion ("11,960 visitors started the signup form, 65% of the step before"). The columns, plates and conversions are decorative and hidden from assistive technology. The head above a column uses a short form ("18.4K"), and the exact number is in the spoken sentence. Contrast passes in light and dark, because the figures are text on the page, not on a fill.
How does it fit on a phone?
All five columns stay in one row: the figure is inset only a few pixels, the plates shrink from 40 to 28 pixels, the columns are a little shorter and the conversions sit on the hairline between the plates. At 320 pixels the names are the only text that could crowd, which is why they are one word. Nothing scrolls sideways.