shadcn.io is not affiliated with official shadcn/ui
Identity Verification Account Block for React
A document check as one panel: a four-step rail, a document choice with a drop zone for each side, a demo selfie, an address form and a review that lifts the level from Basic to Verified.
Installation
Overview
Ask for proof of identity without a wall of forms, with this identity check for React with Base UI. A hairline frame with a plus mark on each corner puts a vertical Steps rail at the start (Document, Selfie, Address, Review) over the account's level, and the active step at the end. Document: three radio rows (a passport, a driving licence, an ID card) and a File Upload drop zone for the front and one for the back where the document has one; a zone reads only the file's name, and the drawing beside it is a greyscale placeholder with redacted bars. Selfie: a drawn oval guide and a demo capture, with no camera. Address: three Fields that say what is missing. Review lists what is about to be sent, and Submit lifts the level from Basic to Verified. On a phone the rail becomes "Step 2 of 4" over a thin bar, and the action foot with the Shine Button stays pinned. It's built from Steps, File Upload, Field, Input, Progress, Badge, Button, Shine Button and Guides, with a CSS entrance only. For a lender, a marketplace or any app that has to know who it is dealing with.
FAQ
Are the documents uploaded or read?
No. The drop zone takes the file the visitor chooses and keeps only its name in this page's state; the file itself is neither read nor sent, and the review lists names only. A wrong type or a file over 10 MB is refused in words under its zone. To make it real, send the file from takeFile to storage you control and never show a document back in the page; the redacted drawing beside each zone is only a placeholder.
Does it open the camera?
No. The selfie step draws an oval guide and a button, "Use the demo capture", that marks the step done and says nothing was kept. Your own version would start a camera stream from that button and send the frame to your verifier; the drawing stays as the guide.
How does moving through the steps work?
Continue checks the step it leaves and says what is missing: the front of the document, the selfie, or each address field, and moves focus to the first thing to fix. A good step moves on and focus lands on the next step's heading. Back returns without losing what you entered. The rail is read-only, so the only way forward is Continue.
What does Submit do, and what stays local?
In this demo it lifts the level badge from Basic to Verified, switches the rail to done and says "Submitted in this demo. Nothing was sent." The button then rests, quiet, and Back becomes Start over, which clears everything. Everything else is local too: the choices, file names, selfie and address stay in this tab and a reload starts again. In your app the level would change only after your review says so.
Why does the panel not change height between steps?
All four steps stay in one grid cell, the inactive ones hidden and out of the tab order, so the cell is as tall as the tallest step. The status line and the drop zones' hints have room for their longest text.
Is it accessible, and how does it look on a phone?
The document choice is a native radio group, each zone is a named group with a button that says which side it is for, problems sit under their field and the same words go to the polite status line in the foot. The rail marks the current step and, to a screen reader, the finished ones. On a phone the rail becomes one line and a thin bar, the drawings are hidden and the foot stays pinned.
Related
- Pro
Verification Record Account
VerificationWhat an account has proven and when each proof ends: four rows with the method, the day and a derived end date, a due-soon state, one band that takes a six-digit code or a name, and Undo.
- Pro
Identity Wallet Account
VerificationA wallet of verified credentials: three cards in an inset frame, a shop's request for the chosen one with what it would and would not see, an optional extra switch and a Share button.
- Pro
Verified Addresses Account
VerificationThe addresses on an account with which are proven by a postcard code: three ruled rows with one primary, a verify band with a code field and a resend, a form that checks the postal code by country, and Remove with Undo.
- Pro
Profile Setup Onboarding
Profile and accountA profile step for a creator site: name, what you do, pronouns and a bio with a count in a form, and beside it the card others will see, redrawn on every keystroke, with the profile address worked out from the name.
- Pro
Policy Compliance Status Account
OrganizationsThe rules a managed account must meet by a deadline, as a bento of hairline cells: five rules with their state in words and a Fix button, a segmented bar, days to the deadline and Undo.
- Pro
Digital Signature Account
VerificationA signature and the key behind it: key facts with a fingerprint and a public key download, a signature pad with a typed route, the signature at three sizes, and a new key that asks first.