shadcn.io is not affiliated with official shadcn/ui
Identity Verification Account Block for Solid
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 Solid with Ark 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.