shadcn.io is not affiliated with official shadcn/ui
Lead Captured Success Block for React
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 React with Base 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.
Related
- Pro
Bulk Update Success
Saves and updatesA confirmation panel for a bulk edit: a drawn contacts list whose twelve owner cells were just reassigned, with an undo bar docked at the foot of the stage whose Undo restores every cell, then offers Redo, and a button that applies the edit again.
- Pro
Invite Accepted Roster Success
People and approvalsA confirmation page for a teammate joining: who invited them and when, how many seats are used, and a roster where the new member's row is marked Joined and holds a role select that changes the role sentence below.
- Pro
Talk to Sales Contact
Contact formsA talk-to-sales split for a scheduling platform: what happens next as three numbered steps and a band of contact details beside a form that checks itself, shows each problem under its field and confirms in place.
- Pro
Vendor Compliance Ledger Success
People and approvalsA confirmation panel for a vendor finishing onboarding: the portal address with a copy button, a table of four compliance documents with verified and valid-until days and a state, and a line on when the first to expire is chased.
- Pro
Workspace Starter Channels Success
Account lifecycleA confirmation page for a new team workspace: a drawn messaging window that follows three starter-channel checkboxes, the workspace address with a copy button and one primary that opens the workspace.
- Pro
Role Change Permissions Success
Security and accessA role change confirmation inside an app panel: the role before and after, who changed it and when, how many permissions were gained and lost, and a table of eight capabilities with the new ones marked.