shadcn.io is not affiliated with official shadcn/ui
Location Denied Error Block for Ark UI
A full-screen page for blocked location: type a town instead, nine towns filtered as you type, three stores and their distances beside a drawn map, and a Check again that reads the permission state.
Installation
Overview
Give people a way to carry on when location is blocked, with this location denied page for React with Ark UI. It's the screen Findmark, a chain of stationery shops, shows in its store finder: the page's two side rails run its full height and one band crosses the screen between two rules with a plus mark where each meets a rail. The heading says "We can't see where you are". Under it an Input takes a town, nine invented towns are native radio rows filtered as you type with a polite count, and the Shine Button "Use this place" shows that town's three stores with their typed distances beside a framed, drawn greyscale map with a numbered pin for each. A "Check again" button asks the browser's permissions API for the location state and reports it, and a Collapsible folds away three steps for allowing location. On a phone the map and stores follow the form. It is the fallback for a refused location, not a map. For store finders, delivery, weather and any app that can ask where you are.
FAQ
What is real here, and what stays in the page?
Check again reads navigator.permissions.query for geolocation, which returns only a state ("granted", "denied", "prompt") and never a position. The page never asks for a position at all. The towns, streets, distances and map are invented and typed in TOWNS; pressing Use this place only changes what the page shows. In your app, search your own store data for the typed town (or geocode it on your server) and keep the numbered pins and list.
What does Check again say?
"Your browser says: location will ask" (or allowed, or blocked), followed by "Findmark never asked for your position". Some browsers keep that answer to themselves; then it says "won't say". It only reads: it does not open a prompt, and it does not change your browser's setting.
How does the town filter work?
Typing narrows the list as you go, ignoring case and accents, so "east" finds Eastmere, and a word that matches no town says so. The count is shown and also spoken once you pause typing, only when it changes. The list sits in a fixed-height box, so filtering never moves the buttons under it, and the towns are native radio buttons: Tab enters the list and the arrow keys move between towns.
Are the pins and distances measured?
No. Each store has a typed distance in kilometres and a typed bearing; the pin's place on the drawing is worked out from those two numbers so the drawing and the list agree, but the map is a sketch, not to scale, and not a real place. Swap the drawing for your map provider's component and keep the list.