shadcn.io is not affiliated with official shadcn/ui
Identity Verification Status Monitoring Block for Solid
Four verification steps, each with one stacked bar of passed first try, passed after a retry, abandoned and failed attempts and its median time; choose a step to see its top three reasons for ending early.
Installation
Overview
See where people succeed, retry or give up while they verify their identity, with this verification status panel for Solid with Ark UI. It is Verifold, an identity verification service (made up), with four steps: Document capture, Selfie, Liveness and Manual review. Each step is a row with one stacked bar of its attempts (passed first try, passed after a retry, abandoned, failed), told apart by weight, hatch and dots, the percentages in words and the median time. The rows are native radios: choosing a step lists its top three reasons for ending early, each with its share. The header sentence names the step that loses the most people. Guides draw the frame and its bands; the entrance is CSS only. For onboarding teams and anyone who runs document, selfie and liveness checks. The data is made up and holds no real documents or people.
FAQ
How do I use my own counts?
Edit STEPS at the top of the file: each step has four counts (passed first try, passed after a retry, abandoned, failed), a median time in seconds and its three top reasons with their shares. The percentages are worked out from the counts and always add up to exactly 100 (largest remainder), and the header sentence is derived from the step with the highest abandoned share.
How are the four outcomes told apart?
By fill, not by colour: first-try passes are solid, passes after a retry are a lighter weight, abandoned attempts are hatched and failures are dotted. The same numbers are printed under each bar, so nothing depends on seeing the fills.
What are the top three reasons?
Each is a share of that step's abandoned and failed attempts, so they need not add up to 100; the rest is not listed. They are typed examples, and the panel keeps the same three rows for every step so the height never changes.
What is real here and what stays local?
Nothing is checked: no document, face or camera is involved, and the counts are examples. Choosing a step only changes the panel and the status line. In your app feed the same shape from your verification events.