shadcn.io is not affiliated with official shadcn/ui
Shopping Tracker Kanban Block for Radix UI
A three-column shopping board (Wishlist, In cart, Bought) of nine items with prices in whole cents, a total on each column, a budget line under the board and a rule that refuses what the budget cannot hold.
Installation
Overview
Plan what to buy with this shopping tracker for React with Radix UI. A hairline frame with a plus mark on each corner holds three columns, Wishlist, In cart and Bought, and nine items. Each card shows the item, the store it comes from and its price. Prices are whole cents, and every column head totals its cards. A band under the board draws the budget: what the cart and the bought items add up to, what is left, and a thin bar for the share. One rule guards it: an item can't leave the wishlist if it would take the total past the budget, and the refusal gives the new total and the amount over. "Buy the cart" in the foot moves every cart item to Bought in one step and says nothing was charged. 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 list. On a phone the columns scroll sideways in one named region. For wishlists, gift lists and any plan with a spending limit.
FAQ
How do I fill it with my own items?
Edit COLUMNS, START and BUDGET. An item has an id, the column it starts in, a title, a store and cents, its price as a whole number of cents. Every total, the budget band and the header sentence are calculated from the cards.
Why are prices whole cents?
Adding decimals gives rounding errors, so the cards hold integers and moneyOf turns them into text only for display, with the thousands grouped. Change the symbol there for another currency, or use Intl.NumberFormat after mount.
How does the budget rule work?
refusalOf adds the item's price to what the cart and the bought items already hold and refuses the move when the sum passes BUDGET. Only moves out of the wishlist are checked, so moving between the cart and Bought, or back to the wishlist, never changes the total's limit. Drag, keys and menu all ask it.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with its title. Press Space or Enter to pick it up, the arrow keys to move it (left and right change column, and swap in right-to-left languages), Space or Enter to drop it and Escape to put it back. Every 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 also has a "More actions" menu with a "Move to" choice for every column. Choosing one moves the card, puts focus on it in its new place and says so in the status line, and it obeys the same rule as a drag.