shadcn.io is not affiliated with official shadcn/ui
Status Badges Stepper Block for React Aria
A short-film production tracker where each of five departments has a glyph-and-word status badge and a select to change it, with a live count and a Needs action filter.
Installation
Overview
Track a status for every step with this badge stepper for React with React Aria. A plus-marked frame holds a vertical Steps rail of five departments for a short-film production (Script, Casting, Shoot, Edit and Delivery). Each row has an outline Badge with a glyph and a word (Completed, In review, In progress, Blocked or Not started) and a select that changes it. The header counts what is left, "Completed 2, Blocked 1", from the statuses, and an "All" or "Needs action" switch filters the rail without moving the foot. "Copy status report" is the block's one Shine Button.
FAQ
How do I add a status?
Add it to STATUSES with an id and a label, give it a glyph in Glyph, and say in needsAction whether it counts as needing action. Counts and the report read the list.
How are statuses told apart without colour?
By a different glyph, the status word in the badge and a heavier border for Blocked. All badges are the same outline style.
Why does the list not shrink when I filter?
The block holds the height of the full list so the foot stays still. When nothing needs action it says so inside that space.
What stays local?
Statuses are component state. The report button writes real text to your clipboard and nothing is sent. To persist, save each change from pick.