shadcn.io is not affiliated with official shadcn/ui
Approval Workflow File Upload Block for Svelte
Sign-off for a marketing team: a list of submitted files, the chosen file's three stages, an Acting as select that decides which actions work, a reviewer note and a decision log that grows as you act.
Installation
Overview
Show who may do what at each stage of a sign-off, with this approval workflow for Svelte with Ark UI. It is the review desk of Okaylane, a marketing team. A list of four submitted files sits at the start, each with its stage in a Badge; the chosen file beside it shows a strip of three stages (Submitted, In review, Decision), an Acting as Native Select with Submitter, Reviewer and Admin, a reviewer note in a Textarea and a decision log. The select decides what the buttons may do: a reviewer starts a review, approves with the Shine Button or requests changes with a note; the submitter resubmits after changes; an admin may do both. A button the role cannot press stays in place and the status line says why. Every action moves the file along and adds a line to the log, in the page only. The panel is ruled by Guides. For marketing sign-off, legal review and any file that waits on a decision.
FAQ
What can each role do?
A reviewer starts the review, approves, or requests changes; the submitter resubmits a file whose changes were requested; an admin can do all of those. Pick a role in Acting as and the buttons follow. The block applies the rule for the stage and the role in one place, mayForward, so it is easy to change.
What happens when a role cannot press a button?
Nothing moves and nothing is hidden. The button stays where it is, marked unavailable, and the status line says why, for example that only a reviewer can approve and you are acting as Submitter. That keeps the layout still and tells you what to change.
Why does Request changes ask for a note?
A request without a reason is no use to the submitter, so the note must have at least five characters. If it is empty the field shows a problem in a reserved line and takes focus. The note goes into the log with the request.
Where do the log lines come from?
Each file starts with its history, typed with fixed dates. Your actions add a line at the top with the demo's fixed time (Oct 16, 11:00) and your role. The log is a scroll region of fixed height, so it never pushes the buttons around.
How do I use it from the keyboard?
The files are buttons in a list and the chosen one is marked as current. Tab to the Acting as select, the note, then the two buttons. Enter in the note field does not submit; use the buttons. A polite status line reads out every result.
What stays local, and how do I wire it?
The four submissions, the role and the log live in the page and nothing is sent. To wire it, load the submissions and their history from your API, take the role from the signed-in user rather than a select, and send each action to the server, which must check the role again.