shadcn.io is not affiliated with official shadcn/ui
Conversion Funnel Dashboard Block for Svelte
A five-step funnel from visitors to retained subscribers, with every device, country or source ranked by its conversion into the step you pick and the gap to the average in points.
Installation
Overview
See which segment loses the most people at each step, with this conversion funnel panel for Svelte with Ark UI. A hairline frame with a plus mark on each corner opens with the funnel (Visitors, Sign-ups, Activated, Subscribed and Retained) as slim bars with their counts and the share of the step before. A Toggle Group in the header splits the visitors by Device, Country or Source, and a second one picks the step to rank into. Below, every segment is listed best first with its conversion, a bar with a tick at the average and the gap in points, and the biggest gap is named in a polite line ("Biggest gap into Activated: Mobile web, minus 14.8 points against the 55.0% average"). It's built from Toggle Group, Badge and Guides. For product analytics and growth reviews.
FAQ
How do I fill it with my funnel?
Edit TOTALS (the count at each step for all visitors) and the segments of each split in DIMENSIONS. A segment is a name and its five counts, in step order. Conversion, the average, the gap in points, the ranking and the sentence are all worked out from those counts. Keep each split adding up to TOTALS, so the funnel reads the same under every split.
What does the gap mean?
A segment's conversion into a step is the people who reached it divided by the people who reached the step before. The gap is that rate minus the average rate of all visitors, in percentage points, so minus 14.8 points means the segment converts 14.8 points under the average. The segment furthest under it gets the "Biggest gap" badge.
Can a small segment fool it?
Yes. The ranking is a plain comparison of rates, and a segment with a few dozen visitors can sit far from the average by chance. The note under the table says so. If you keep small segments, add a minimum count before you name one the biggest gap.
What stays local, and how do I wire it for real?
Everything: the counts are typed for a fixed 28 days and nothing is measured. To make it real, query your events grouped by the dimension and the step, return the same shape, and swap the typed arrays for the result. The period label and the sentence in the header read from constants at the top of the file.