shadcn.io is not affiliated with official shadcn/ui
Kanban Status File Upload Block for React
A four-column intake board (Queued, Uploading, Processing, Complete) where each card has one Advance button, moves one stage at a time, and a flagged card in Processing offers Retry.
Installation
Overview
Show where every file is in a pipeline, with this file upload panel for React with Base UI. It is the intake board of Milltown, which digitises a print archive. Four stage columns sit on shared hairlines (Queued, Uploading, Processing, Complete), each with its count, and each card shows a file's name, size and state. Every card has one Advance button and the board enforces the order: a card moves one stage at a time and never skips. A card in Processing may be flagged, for example with a missing colour profile, and then the same button reads Retry and clears the flag before it can move on. A Move to Native Select on each card is the keyboard route and refuses a jump, saying why. The header's Add files, a File Upload trigger, puts a new card in Queued. On a phone the columns scroll sideways, the next one showing. The panel is ruled by Guides. It is built from File Upload, Native Select, Button, Shine Button and Guides, with a CSS entrance only. For intake pipelines, review queues and any process with ordered stages.
FAQ
How does the board enforce the order?
Advance always moves a card to the next stage, and Move to accepts only that next stage. Choosing an earlier or later stage leaves the card where it is and the status line says "Cards move one stage at a time: Queued goes to Uploading." The last stage, Complete, has no actions.
What does a flagged card do?
A flagged card shows its reason with a flag icon, and its Advance button becomes Retry in the same place. Retry clears the flag in this demo and focus stays on the button, which then reads Advance. Move to explains that a flagged card must be retried first.
Can I drag cards?
No. Dragging is not the only route and is not offered: Advance and Move to work with the keyboard, a switch or a screen reader. If you add drag, keep both of them.
How is this different from the changelog kanban?
The changelog board is a roadmap whose cards collect votes. This one moves state: each press changes a card's stage and the counts in the column heads.