shadcn.io is not affiliated with official shadcn/ui
Project Planner Kanban Block for React
A three-column project board of nine tasks with a due date and an overdue word on each card, a progress bar, and a subtask checklist in a popover that moves the card's progress and the column's average.
Installation
Overview
Plan a launch task by task with this project board for React with Base UI. A hairline frame with a plus mark on each corner holds three columns that share their lines: Todo, In progress and Complete, each head showing the average progress of its cards. Each of the nine tasks is a card with its due date, a due word worked out from a fixed date ("Overdue by 3 days", "Due in 4 days"), a Progress bar and a "3/5" button that opens a Popover with the task's five subtasks as Checkboxes: ticking one moves the card's bar and the column's average at once, and at 5 of 5 the popover offers an outline "Move to Complete" (a task never moves on its own). One rule guards the last column: a task with subtasks left cannot be complete, and the refusal counts what is left. A card also moves by dragging its grip, by Space, the arrow keys and Space again (Escape cancels), or from its Dropdown Menu; a polite status line in the foot reports each change and Reset restores the plan. The frame is ruled by Guides. On a phone the columns scroll sideways in one named region. For launch plans, sprint tasks and any work with subtasks.
FAQ
How do I fill it with my own tasks?
Edit COLUMNS and START. A task has an id, the column it starts in, a title, a due date as an ISO string and a list of steps, each with a label and a done flag (the stepsOf helper builds five at a time). Progress, the averages in the heads and the header sentence are calculated from the steps.
How is the overdue word worked out?
From the due date and AS_OF, a fixed date at the top of the file, never from the clock, so the words stay true when the demo is read later: whole days between the two give "Overdue by 3 days", "Due today", "Due tomorrow" or "Due in 4 days", and a task in Complete says "Done". In your app, set AS_OF from the server's date.
How does the checklist work?
The "3/5" button is the one control on the card besides the grip and the menu. It opens a popover of five labelled checkboxes; each tick calls the block's act, which updates the steps, the card's progress, the column's average and the status line in one update. The popover stays open while you tick, Escape closes it and focus returns to the button.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with the card's title. Space or Enter picks it up, ArrowUp and ArrowDown change its place, ArrowLeft and ArrowRight go to the neighbouring column (they swap in right-to-left languages), Home and End jump to the top and bottom, Space drops it and Escape puts it back. Each step is announced in the status line.
Is there a way to move without dragging?
Yes: the menu at the end of each card lists the columns with the current one ticked, so one click 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, and it obeys the same rule as dragging.