shadcn.io is not affiliated with official shadcn/ui
OCR Extract File Upload Block for React
A scanning window with a skewed page, numbered region boxes you can show or hide, the recognised text as lines linked to their regions, an editable text box, a word count and Copy.
Installation
Overview
Show recognised text next to the page it came from, with this file upload window for React with Base UI. It is the review window of Scribelift, a scanning desk for archivists. On one side a page of a parish register is drawn slightly skewed, as a real scan would be, with a numbered region box around each line of writing and a Switch that shows or hides the boxes. On the other, the recognised text is a list of lines, one per region, over an editable Textarea with a word count, a language Badge and a Copy Button. Choosing a line lights its region on the page, and choosing or focusing a region lights its line. The top bar's one Shine Button, Choose a scan, opens a File Upload picker. The window is framed by Guides and keeps one height. For digitisation tools, archives and any app that reviews recognition output.
FAQ
Does it read the scan?
No. The page and its six lines are typed sample data, and a file you choose is listed by name only and never opened. The status line says "Sample text, typed. Nothing is read." from load. No confidence number is shown, because none was measured. A real build would send the file to a recognition service and draw its boxes from the response.
How are lines and regions linked?
Each line has one region and one number. Choosing a line button or focusing it marks the region with the same number on the page; choosing or focusing a region marks its line. The regions are buttons, so the keyboard reaches them with Tab. Hiding the boxes with the switch keeps the chosen line faintly marked so the link is still visible.
What happens when I edit the text?
The text box is yours to change, and the word count, Copy and the "edited" note follow it. The line list and the regions stay as recognised, and the status line says "Edited: regions no longer match" so nobody thinks the boxes still describe the new words. Reload to start over.
What does Copy copy?
The whole text box, as it is now, and a polite message says "Text copied". If the clipboard refuses, the button says so.