shadcn.io is not affiliated with official shadcn/ui
Shopping List by Aisle Block for Radix UI
A weekly shop list in Produce, Dairy, Pantry and Household bands with a quantity stepper per item, line prices, an In basket and Still to get total in whole pence, and Clear purchased with Undo.
Installation
Overview
Make the weekly shop easy to walk, with this shopping list block for React with Radix UI. Items sit in aisle bands, each with a count of what is in the basket, and every row has a Checkbox named by the item, a quantity stepper from 1 to 9 and the price of the line. The foot works two totals from whole pence, so the figures always add up: what is In basket and what is Still to get. An outline Clear purchased button removes the ticked items and keeps a one-line Undo that puts them back where they were. A labelled Input with the only colored control, a Shine Button, adds an item under Produce; an empty submit says "Write an item first" and keeps focus. The list region holds its height, so clearing never lifts the foot, and an Empty state appears when nothing is left. Guides rule the bands. For grocery apps, household planners and any list with a running total.
FAQ
How do I load my own items?
Replace START with your items. Each has an aisle, a name, a qty, a cents price for one and a done flag. Add an aisle to AISLES and the band appears. Prices are whole pence, so convert from your store's decimals when you load them.
Why are prices kept in whole pence?
Adding decimals in a browser can print totals like 8.350000000000001. The block adds integers and formats them once with the pounds helper, so a line, a band and the foot always agree. Change the helper to format another currency, and mark the symbol with dir="ltr" as it does now so right-to-left pages keep the figure whole.
What stays local, and how do I save for real?
Everything. Ticking, changing a quantity, adding, clearing and undoing change state on the page; nothing is saved, ordered or sent, and the list resets on reload. In your app write each change from toggle, setQty, add, clearBasket and undo to your own store.
How does Undo work?
Clear purchased removes every ticked item and shows one line, for example "Cleared 3 items from the basket", with an Undo button. Undo returns them to the positions they had. The line holds one removal; adding an item replaces it, and nothing disappears on a timer.