shadcn.io is not affiliated with official shadcn/ui
PDF Viewer File Upload Block for Ark UI
A contract reader window: a rail of twelve drawn page thumbnails, the current page drawn large with zoom, an editable page number, and a page-range field that is validated, highlights the pages it covers and copies the range.
Installation
Overview
Pick the pages you need out of a long document, with this PDF viewer window for React with Ark UI. It is Reamwise, a contract reader for legal-ops teams. A rail of twelve drawn page thumbnails (title, text, table and chart pages) sits beside the current page drawn large, with previous and next buttons, an editable "Page 3 of 12" and a Toggle Group that zooms to Fit, 100% or 125%. A Field takes a page range such as "1-3, 5"; a small parser checks it against the twelve pages, marks the thumbnails it covers, says "4 pages selected" and copies the cleaned range with a Copy Button. Shift-click a thumbnail to select the run from the current page. A File Upload strip lists a chosen PDF's name and size beside a document facts column, and the one Shine Button extracts the selected pages. The window is framed by Guides, with a CSS entrance only. For contract review, document tools and any reader that works in page ranges.
FAQ
What does the range field accept?
Page numbers and runs separated by commas, such as 1-3, 5 or 2, 4-6. Spaces are ignored and repeated pages count once. A page past the end, a run that goes backwards or text that is not a page says so under the field in words, and the page count stays clear of it so nothing jumps.
How do I select a run from the thumbnails?
Click a thumbnail to go to that page. Shift-click another to select every page from the current one to it; the range field is rewritten as 3-7, so the thumbnails, the field and the count always agree.
What stays local in this demo?
Everything. The twelve pages are drawn from typed data, and a chosen or dropped PDF is only listed by its name and size in the facts column and the title; it is never opened, read or uploaded. Extract pages reports "Extracted 4 pages in this demo" and makes no file.
How do I wire it to real documents?
Render each thumbnail and the large page from your own page images or a PDF renderer, keep parseOf and textOf for the range, and make the Extract action call your server with the selected page numbers. The rest of the window can stay as it is.