shadcn.io is not affiliated with official shadcn/ui
Marketing Funnel Kanban Block for Svelte
A four-stage funnel board of ten campaign cohorts that shows each stage's leads, the share that moves on to the next stage and its cost per lead, all recalculated when a cohort moves.
Installation
Overview
Find where a funnel leaks with this marketing board for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds four stages that share their lines: Awareness, Interest, Consideration and Decision. Each of the ten cohorts is a card with a campaign title, the leads it produced in a Badge and what it cost, and every stage head counts its leads and shows two derived figures: the rate to the next stage ("50% move on", the leads in the next stage as a share of this one) and its cost per lead, with the last stage saying "End of funnel". The header sentence gives the share of Awareness leads that reach Decision and the overall cost per lead. A cohort moves by dragging its grip, by Space, the arrow keys and Space again (Escape cancels), or from its Dropdown Menu with "Move to", and every rate is worked out again. The frame is ruled by Guides. On a phone the stages scroll sideways in one named region with the next stage showing. For campaign reviews and any funnel you want to read stage by stage.
FAQ
How do I fill it with my own campaigns?
Edit COLUMNS and START. A cohort has an id, the stage column it starts in, a title, a leads count and its spend in cents (the usd() helper turns dollars into cents). The rates, the cost per lead and the header sentence are calculated from the cards by rateOf, perLeadOf and headlineOf.
How are the rates worked out?
The rate at a stage is the leads in the next stage divided by the leads in this one, rounded half up to a whole percent, so it is a snapshot of where cohorts sit now rather than a tracked journey. With no leads in a stage the rate reads "0% move on" instead of dividing by zero. The cost per lead is the stage's spend in cents divided by its leads, rounded half up, shown in dollars and cents.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with the card's title. Space or Enter picks it up, ArrowUp and ArrowDown change its place in the lane, ArrowLeft and ArrowRight go to the neighbouring lane (they swap in right-to-left languages), Home and End jump to the top and bottom, Space drops it and Escape puts it back. Each step is announced in the status line.
Is there a way to move without dragging?
Yes: the menu at the end of each card lists the lanes with the current one ticked, so one click moves the card, focus lands on it in its new place and the status line says so. This is the route for a single pointer and for touch.
What stays in the demo?
Everything. The moves live in the component's state, nothing is saved or sent, and a reload or Reset brings back the starting board. The product, the deals and the figures are made up. To keep a board, call your API from put, the one function every finished move goes through, and update the cards from the response.
How does it look on a phone?
The lanes scroll sideways inside the board with the next lane showing, and each lane scrolls up and down within the board's fixed height, so the page does not jump when a card moves. Each stage head keeps two lines whatever the numbers, so the heads stay level. Touch drags from the grip only, so the rest of a card still scrolls; the menu is the other way to move it.