shadcn.io is not affiliated with official shadcn/ui
Pick Up In Store Storefront Block for React
A collection counter for a hardware shop: three stores with distance, today's hours and readiness, collection windows that close when the store does, and a reserved pass with a QR code, order number and collect-by date.
Installation
Overview
Let a shopper reserve an order for collection and walk in with proof, with this collection counter for React with Base UI. A header names the choice and says what Yellowhammer is. In a hairline frame with a plus mark on each corner, three stores are listed as one radio group with their distance, today's hours worked out from typed opening hours and the sample time, and how soon an order is ready, and four collection windows are radio chips that say Closed, and cannot be chosen, when the chosen store is shut for the whole window. A side cell holds the pass: Reserve draws a real QR Code from a typed link on example.test, fills in the order number beside a Copy Button and writes "Collect by Sat 17 Oct", the sample date plus an eight day hold. Cancel empties it and keeps the choice. The primary is the Shine Button. It's built from native radios, QR Code, Copy Button, Shine Button and Guides, with a CSS entrance only. For click and collect, a trade counter or a pharmacy.
FAQ
How do I fill it with my own stores and windows?
Edit STORES for each store's name, distance, readiness line and opening hours (a pair of hours for weekdays and one for Saturday), and WINDOWS for the collection windows, each with its day, start and end. A window is open for a store only when the whole window fits inside that store's hours, which is computed, not typed.
What does the pass show?
The store, the window, the order number and the collect-by date, with a QR code that encodes the typed link. The pass area keeps its size before and after you reserve, so the page does not move; before you reserve it reads No pass yet.
What stays local, and how do I wire it to real orders?
Nothing is reserved, emailed or kept, and the QR code points at a reserved example domain. To wire it up, create the reservation on your server when Reserve is pressed, use the order number and link it returns in ORDER and LINK, and let your inventory decide the readiness line. The copy button and the QR code already work.
How are today's hours worked out?
The sample time is a Friday at noon, store time. A store that opens after noon reads "Opens at 13:00 today", one that is open reads "Open until 18:00 today", and one that has closed reads "Closed for today". Changing store also moves the window if the old one would be closed there.
Is it accessible?
Stores and windows are native radio groups in labelled fieldsets, so the arrow keys work and a closed window is skipped. Closed is written, not only dashed. The pass is described for a screen reader, the copy button is named, and one polite status line says what was reserved or copied.