shadcn.io is not affiliated with official shadcn/ui
Analytics Sidebar Stepper Block for Svelte
A read-only funnel report in a window: five stages in a rail, each with its sessions and a bar for its share of signups, and a pane of metrics for the stage you choose.
Installation
Overview
Turn a funnel into something you can walk with this analytics stepper for Svelte with Ark UI. A window framed by a hairline with a plus mark on each corner has a top bar with the report's name and its reporting period, and no primary action because nothing here changes. The rail is a vertical Steps list of five stages (Signup, Onboarding, Payment, Activation and Engaged); each row has its number, its session count and a thin bar for its share of signups, the chosen stage drawn at full weight. The pane shows that stage's metrics in a Data List: sessions that reached it, share of signups, sessions lost there, that loss as a share of signups and the average time, with a Progress bar and the funnel's biggest drop-off, all worked out from the typed counts. Choosing a stage re-targets the pane and the status line. On a phone the metrics sit under the rail. For funnels, pipelines and checkout drop-off reports.
FAQ
Where do the numbers come from?
Only STAGES holds data: the sessions at each stage, an average time and a sentence. Shares, losses and the biggest drop-off are derived, with percentages worked out in tenths from whole counts so they add up. The counts are sample data.
What does drop-off mean here?
The sessions that reached a stage and did not reach the next, shown as a share of all signups so the stages can be compared. "Biggest drop-off" is the stage with the largest such loss; the last stage has none.
How do I connect real data?
Replace STAGES with the result of your query, keeping the order of the funnel. Everything else is computed from it, and the reporting period in the top bar is a plain time element you can bind to your range.
How does the keyboard work?
The rail is one tab stop on the chosen stage, arrow keys move between stages and Enter or Space chooses one. The metrics region can take focus to be scrolled, and the status line speaks the chosen stage and its sessions.