shadcn.io is not affiliated with official shadcn/ui
File Upload Flow Stepper Block for Ark UI
A four-step claim-evidence wizard whose step titles carry live file counts, with a drop zone, a review list with Remove, a label per file, a claim number check and a tray that lists the names.
Installation
Overview
Add evidence to a claim in steps, with this upload stepper for React with Ark UI. A hairline frame with plus marks holds a Steps line whose titles carry live counts: "Files (3)" and "Labelled 2 of 3". Select files is a File Upload drop zone for up to four PDFs, PNGs or JPGs of 5 MB or less; Review lists each file with a type Badge, its size and a Remove button, with an Empty state when none remain; Label gives every file a Receipt, Report or Other label in a Native Select; Send asks for a claim number in a Field and reads everything back. Next is off until at least one file is chosen, and a tray under the panel lists the names on every step. "Add to claim" is the block's one Shine Button.
FAQ
Are the files uploaded?
No. The picker reads only each file's name, type and size and the block keeps those; the file itself stays in the tab and is never read or sent. To make it real, send each File from the accepted handler to your storage and keep the returned ids.
What does each step check?
Select files needs one file and names anything it refuses (a wrong type, over 5 MB, more than four in all, or a twin of a file already chosen). Label needs every file labelled, and says which are not. Send needs a claim number of "CL-" and six digits. Problems show in a reserved line and the first one takes focus.
Where do the counts in the titles come from?
titleOf reads the files: step 1 shows the number chosen and step 3 shows how many have a label. The tray, the review rows and the summary read from the same list, so they cannot disagree.
What stays local, and how do I make it real?
Everything. "Add to claim" ends on a panel that says "Added in this demo", and "Start over" clears the list. To make it real, post the claim number and the labelled files from the submit handler on Send and show the response in the last panel.
How does the keyboard work?
The step line is one tab stop on the current step; arrow keys move between the steps you can reach. Browse files opens the picker; each Remove button is named with the file. After a move or a removal, focus goes to the step's heading, and a polite line in the foot says what changed.