shadcn.io is not affiliated with official shadcn/ui
Store Locator Storefront Block for Ark UI
A size stock table for five garden centres selling one boot: sizes 3 to 10 as columns, In, Last one or Out in words, the stores that have your size first, and a Hold 1 button that only records a hold in the demo.
Installation
Overview
Answer "who has my size" before the shopper drives anywhere, with this stock table for React with Ark UI. A header names the question and says what Meadowfield sells. In a hairline frame with a plus mark on each corner, the first band is a radio group of sizes 3 to 10 and Any, and a table lists five stores with their distance in miles and a cell per size that says In, Last one or Out in words from a typed count. Choosing a size marks its column and puts the stores that have it first, then the rest, each group nearest first; the status line says "3 of 5 stores have size 7". Each store has a Hold 1 Button for the chosen size, which only records a hold in this demo, and a store with none cannot be held. There is no map: this is about stock, not directions. On a phone each store is a card with its sizes in a grid of four. It's built from native radios, a native table, Button and Guides, with a CSS entrance only. For a shoe, tool or plant shop with stock in several branches.
FAQ
How do I fill it with my own stores and stock?
Edit STORES (an id, a name, the distance in miles and a list of pairs in stock for sizes 3 to 10) and SIZES. The words In, Last one and Out, the sort and the "3 of 5 stores" count are all derived from the numbers.
How are the stores ordered?
With a size chosen, the stores that have it come first and the others after them, each group by distance. With Any size, all five are by distance. The rows reorder on the press, not while you are pointing, and the status line says what you see.
What does Hold 1 do?
For the chosen size it records a hold on that store in the tab, turns the button to Held and says so in the status line. If no size is chosen, or the store has none of that size, the button stays reachable and the status line says why, so a keyboard user hears the reason. Nothing is reserved at the shop.
What stays local, and how do I wire it to real stock?
The stock, the distances and the holds are typed or held in the tab, with the date shown as 9 October 2026. To wire it up, load each branch's count for the product from your inventory service, compute the distance from the shopper's postcode on the server, and have Hold call your reserve endpoint.