shadcn.io is not affiliated with official shadcn/ui
AI Analyze File Upload Block for Vue
A filing desk with a Suggested tags sheet shown open: seven typed suggestions in Tags, Text and Objects, each accepted or dismissed with a reason, and Apply tags that writes the accepted ones on the file.
Installation
Overview
Let people accept or dismiss each suggested tag instead of trusting a pile of labels, with this file upload sheet for Vue with Ark UI. It is the filing desk of Docsift, a filing assistant for a small firm. The page header holds an outline Suggest tags Button and a line that says which tags are on the file; the stage under it draws the document, a page of ruled lines with a signature box and a File tags strip, under a soft scrim. The Sheet, shown open on load, lists seven suggestions in three groups, Tags, Text and Objects. Each has a one-line reason and Accept and Dismiss buttons that can be pressed again to take back, and the sheet tallies them: "3 accepted, 2 dismissed, 2 to review". Apply tags, the one Shine Button, writes the accepted ones onto the file. The stage is framed by Guides. For document managers, case files and any app that suggests labels a person approves.
FAQ
Why is the sheet already open, and what do I keep?
So you can see it without a click. On load the sheet is a copy drawn in place at the end of the frame: a native dialog element that isn't modal, so nothing is trapped, hidden or focused. Suggest tags opens the real Sheet, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same SuggestionList and share the block's state. In your app keep the Sheet and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.
Is there a model behind the suggestions?
No. The seven suggestions and their reasons are typed for this sample page, and the sheet says so. No percentage is shown, because nothing was measured. In your app, fill the list from your analysis service and keep the reason line: a reason a person can check is what makes a suggestion easy to accept or dismiss.
How do Accept and Dismiss work?
Each button is a toggle that names its suggestion ("Accept Lease"). Pressing the active one takes it back to "to review". The tally at the top counts all three states, and a hidden polite message says what changed. Nothing is written to the file until Apply tags.
What does Apply tags change?
It copies the accepted suggestions to the file: the header line reads "Tags on this file: Lease, Renewal, Signature block." and the drawn card behind grows a chip for each. Cancel, Close and Escape close the sheet and keep your answers for next time without applying them.
Which side does the sheet open from?
From the end of the page's reading direction: the right in a left-to-right page and the left in a right-to-left one. The sheet's own sides are physical, so sideOf reads the direction when the sheet opens. On a phone the copy docks to the foot of the frame as a bottom sheet.