shadcn.io is not affiliated with official shadcn/ui
Product Availability Map Storefront Block for Radix UI
A stock map for a surfboard: eight US regions as shaded tiles, a side cell with the warehouse, stock and delivery time, and the nearest region with stock when the one you pick is sold out.
Installation
Overview
Show where a product is in stock, with this availability map for React with Radix UI. A header names the Drift 6'2 from Sloe & Sparrow. A hairline frame with a plus mark on each corner holds two cells. The first is a tile map, a cartogram of eight US regions in a grid of four by two, each tile shaded by how much stock the region holds in four weights of the text colour (Plenty, Some, Few and None, the last an empty dashed tile) with a legend that names them. The tiles are one radio group, so the arrow keys move over them. The second cell follows the pick: the region, its warehouse, the stock in words ("Low: 4 remaining", "Sold out") and the delivery time. For a region with none it names the nearest region that has stock, counted in tiles, and adds a day for each tile away, so a sold-out board is never a dead end. A status line says the stock is a sample. It's built from native radios, a description list and Guides, with a CSS entrance only. For a product page, a store finder or a pre-order page.
FAQ
How do I fill it with my regions?
Edit REGIONS: each has an id, a name, a col and row on the tile grid, the units in stock, the warehouse and the delivery days as a shortest and a longest. The shade and the level word come from LEVELS, so change the thresholds there.
How is the nearest region chosen?
By the distance in tiles (columns plus rows), then by the most units. The delivery time is that region's own time plus one day for each tile. It is a rule written into the page, not a shipping quote; replace viaOf with your carrier's table.
What stays local, and how do I wire it to real stock?
The stock is a sample as of 9 October 2026 and is not live. Replace REGIONS with the result of your inventory API, one entry per region. Nothing is reserved when a region is picked.
How do the arrow keys work?
The tiles are a native radio group, so the arrow keys move to the next or previous tile in reading order and wrap at the ends, and the side cell updates on each move. Tab moves out of the group.