shadcn.io is not affiliated with official shadcn/ui
Creative Briefs Kanban Block for React Aria
A brief tracker of ten agency jobs in Intake, Drafting, In review and Approved, each with a due word worked out from a fixed date and a reviewer select that approval requires.
Installation
Overview
Track creative work from request to sign-off with this briefs kanban for React with React Aria. A hairline frame with a plus mark on each corner holds four columns that share their lines (Intake, Drafting, In review and Approved) and ten briefs. Each card shows its title, its client, a due word worked out from a fixed date ("Due in 3 days", "Due today", "Overdue by 3 days", or "Approved") and a Native Select to choose its reviewer. A brief can't be approved until it has a reviewer, and an approved brief keeps the one it has; both refusals say what to do. A card moves by dragging its grip, by Space, the arrow keys and Space again (Escape cancels), or from its Dropdown Menu with "Move to". The sentence under the heading counts the overdue briefs and the ones still without a reviewer, and a polite status line in the foot reports every move and every choice. The frame is ruled by Guides. On a phone the columns scroll sideways in one named region. For agencies, in-house studios and any team where work needs a named approver.
FAQ
How do I fill it with my own briefs and reviewers?
Edit COLUMNS, REVIEWERS and START. A brief has an id, a title, a client, a due date, a reviewer (empty until chosen) and the column it starts in. The due words, the counts and the header sentence are calculated from the cards and the fixed AS_OF date.
Why is the due word fixed, and how do I make it live?
The words are worked out from AS_OF, a constant date in the file, so the block reads the same on every load and in the docs. For a real product, replace AS_OF with today's date at the start of the day in your users' time zone; dueWords needs nothing else.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with the brief's title. Press Space or Enter to pick it up, then ArrowUp and ArrowDown to change its place, ArrowLeft and ArrowRight to go to the neighbouring column (the arrows swap in right-to-left languages), Home and End for the first and last place, Space or Enter to drop it and Escape to put it back. A step into Approved without a reviewer is refused in the status line and the brief stays where it was. Every step is announced in the status line in the foot.
Is there a way to move without dragging?
Yes: the menu at the end of each card lists every column under "Move to" with the current one ticked, so one choice moves the card, focus lands on it in its new place and the status line says so. This is the route for a single pointer and for touch. React Aria's menu is a group of selectable items, so the column is chosen by selection rather than by a radio item.
What stays in the demo, and how do I save it?
Everything: The moves and the reviewer choices live in the component's state, nothing is saved or sent, and a reload or Reset brings back the starting board. To save for real, call your API from put (every finished move) and from act (a reviewer choice), then update the cards from the response. The product, the people and the cards are made up.
How does it look on a phone?
The board is a sideways scroll region with the next column showing, and each column scrolls up and down inside the board's fixed height, so the page never jumps when a card moves. Touch drags from the grip only, so the rest of a card still scrolls the board; the menu is the other way to move a card.