shadcn.io is not affiliated with official shadcn/ui
Weekly Goals Kanban Block for React Aria
A Monday to Sunday board of twelve goals with points, a Done button on each card, a bar of points earned, and a sentence that turns into a celebration in words when every goal is done.
Installation
Overview
Aim the week and close it with this weekly goals board for React with React Aria. A hairline frame with a plus mark on each corner holds seven columns, Monday to Sunday, and twelve goals, each with a target in words ("Run 20 km in total"), a category in an outline Badge and points from one to five. The Done button on a card marks the goal done and adds its points: a thin bar above the board shows the points earned out of the points planned, with a sentence beside it, and when every goal is done the sentence turns into a celebration in words, with no confetti, saying the week is complete and how many points it earned. Moving a goal to another day keeps it done or not, and each column head adds up its points. Cards move by dragging the grip, by Space, the arrow keys and Space again (Escape cancels), or from the Dropdown Menu with "Move to". A polite status line reports each change and Reset restores the week. On a phone the columns scroll sideways in one named region. For weekly reviews, personal goals and any plan scored in points.
FAQ
How do I fill it with my own goals?
Edit COLUMNS and START. A goal has an id, the column (day) it is planned for, a title that holds the target, a category, its points and a done flag. The bar, the column totals and the sentences are calculated from them.
How does the celebration work?
weekLine reads the cards: when isComplete is true it returns the closing sentence with the points earned, otherwise it says how many goals and points are done and how many are to go. It is plain text, so it is read out, follows the theme and needs no animation. The status line says it too when the last goal is ticked.
Why is Done a button and not a checkbox?
Because it marks a goal as finished for the week rather than ticking a list item: it is a toggle button, pressed when the goal is done, named "Done for" and the goal. Pressing it again reopens the goal and takes its points off the bar.
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, the arrow keys move it (left and right change column and swap in right-to-left languages, up and down change its place), Space drops it and Escape puts it back. Each step is announced in the status line.
Why is there a menu as well as the grip?
Dragging needs a held pointer and a path, which not everyone has, so each card has a "More actions" menu with a "Move to" choice for every column and the current one ticked. Choosing one moves the card and says so in the status line. React Aria's menu is a group of selectable items, so the column is chosen by selection rather than by a radio item.