shadcn.io is not affiliated with official shadcn/ui
Lead Captured Success Block for Solid
A confirmation panel for a new sales lead: the person, company, source and intent meter of five segments, a round-robin list of three reps with their open leads as bars, and a select that reassigns the lead locally.
Installation
Overview
Show a rep where a new lead went, with this lead captured panel for Solid with Ark UI. It is the confirmation inside Leadwick's sales workspace after a demo request came in: a header with one action, View the lead, over one framed panel in two cells split by a divider. The first cell is the lead, an Avatar with initials, the name, role and company, the email, the source, when it was captured and an intent meter of five segments with its word. The second is a round-robin list of three reps with the open leads each holds as a Progress bar, the assigned rep marked with a Badge. A Native Select named Reassign to moves the lead to another rep, and the bars, counts and live line follow. On a phone the routing list goes under the lead. For CRM, sales and lead routing tools.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was routed. The lead, the three reps and their open counts are typed constants, and Reassign changes only this page's state, so the bars and the live line move and nothing reaches a CRM. To wire it, call your routing endpoint from the select's change handler, wait for its answer, and then update the counts from the response (the page already recomputes the bars from a rep's count plus the new lead).
How is the first rep chosen?
By round robin: the reps sit in a typed order and the next one in turn gets the lead, which here is Bastien Okoro. Counts shown include the new lead, so the assigned rep holds one more than the others' base number. A real router would also skip reps who are away or at their cap, and the bar's full width is that cap (15 open leads).
What does the intent meter mean?
Five segments, four filled, with the word High and the same words as text ("High, 4 of 5"), so the colour-free bar is never the only signal. The score is a typed number here. In a product it would come from your own scoring, such as page views, form fields and company size.
How does it work with a keyboard and a screen reader?
Reassign to is a native select with a visible label, so it opens with the arrow keys and its choice is announced. Every bar has a name that says whose open leads it shows, and each change is spoken once through a single polite live line that reserves its height, so nothing jumps.