shadcn.io is not affiliated with official shadcn/ui
ID Verification File Upload Block for React
Two capture slots for the front and back of an ID, each drawn with a framed guide, a four-item preflight you tick yourself, and a Submit for review that waits until everything is in.
Installation
Overview
Ask for both sides of a photo ID without pretending to check it, with this file upload panel for React with Base UI. It is the ID step of Vouchbox, tenant screening for a letting agency. Two cells, Front and Back, each hold their own File Upload drop zone drawn with a sketched ID frame that marks the four corners and the line of text that must be readable. A chosen file shows its name and size with Replace and Remove. Under the slots, four Checkbox items are ticked by you: all four corners in view, no glare, the name line readable and the ID not expired. The foot shows a Badge that reads Not submitted and then Submitted, and the one Shine Button, Submit for review, which waits until both slots and all four boxes are in and says why while it waits. The frame's bands are ruled by Guides. For rental, onboarding and any app that collects a document before a person reviews it.
FAQ
Does it check the ID?
No. Nothing is read, compared or judged, and no result is shown: the status only changes from Not submitted to Submitted. The preflight is four boxes you tick yourself, because a person looking at the photo is the check that matters here. In your app the review is a server step that produces its own verdict, which this panel would display.
Should I use a real ID to try it?
No. Use any sample image or PDF. The files stay in the tab, are listed by name and size only and are never opened or sent, and the panel says so in its status line from load. Do not collect real documents without a backend that is built, secured and permitted to hold them.
Why is Submit not disabled while it waits?
It is marked unavailable but still answers. Pressing it reads out what is missing, in the order a person would fix it: the front, the back, then the unticked boxes. A hard-disabled button would hide that reason from keyboard and screen reader users.
What files does a slot accept?
Images and PDFs up to 10 MB, one per slot. Anything else is refused with a polite line naming the slot. Picking again with Replace swaps the file, Remove empties the slot and returns focus to its Choose button, and any change after Submitted takes the status back to Not submitted.