shadcn.io is not affiliated with official shadcn/ui
Delivery Zones Map Block for Ark UI
Three hairline delivery rings round a bakery on a drawn street map, an address select that names the band, a basket field, and a band table with arrival window, fee and minimum order.
Installation
Overview
Tell customers whether you deliver to them and what it costs, with this delivery zones map for React with Ark UI. Crumbline, a bakery, is drawn as a mark in the middle of an invented town on an SVG street map, with three hairline rings round it: 15 minutes solid, 30 dashed and 45 dotted. A native Select puts one of six invented addresses on the map and names its band, a Number Input holds the basket in dollars, and a Table under the map highlights the band's row with its arrival window, fee and minimum order. Two lines read the result in words: how far the address is and whether the basket reaches the minimum, pays the fee, or is close to free delivery ("$8.00 to go"). An address past the last ring says nothing is delivered there. The map is a fixed view; the address list and the table are the keyboard route. It's built from Native Select, Number Input, Table and Guides, with a CSS entrance only. For bakeries, grocers, restaurants and any local delivery page.
FAQ
How do I set my own bands and fees?
Edit BANDS (the ring's minutes, the arrival window, the fee, the minimum basket and the ring's dash pattern) and ADDRESSES, each with a name and an x and y in the drawing's 480 by 360 units. FREE_FROM is the basket that rides free. The rings and the table read the same list, so adding a band adds a ring and a row.
How are the minutes worked out?
The straight line from the shop to the address in drawing units, divided by UNITS_PER_MIN, a typed courier pace. It is a sketch rather than a route, and the caption says the drawing is not to scale. In your app ask a routing service for the real drive time and keep the band lookup, which only compares minutes with each band's limit.
What does the basket field do?
It decides the second line of the result. Under the band's minimum it says how much to add; between the minimum and the free-delivery line it shows the fee and how much is left to go; from the free-delivery line it says delivery is free. The field takes arrow keys and the plus and minus buttons, and accepts digits in any script.
Is it accessible?
Yes. The address select and the basket field have labels, the table is named and its current row is marked, and the result is written out in two lines that keep their height. A polite status message speaks the result once you stop typing. The rings and pins are decoration, so they are hidden from assistive technology.
What stays local in the demo, and how do I wire it up?
All of it. The addresses, fees and bands are typed sample data, nothing is ordered, and no address is looked up. In your app geocode the typed address on submit, compute the band on your server, and keep the table as the one place the fees are written.