shadcn.io is not affiliated with official shadcn/ui
Geo Blocked Error Block for Ark UI
A full-screen 451 page for a title that is not licensed in the viewer's region: a tile map of six regions, solid where licensed and dashed where not, a Select that checks another region, and a collapsed note about VPNs.
Installation
Overview
Show where something can be watched, not only where it can't, with this geo blocked page for React with Ark UI. It's the 451 screen Reelgarden, a film-streaming service, shows for a title that isn't licensed in the viewer's region: 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, and the screen splits in two on a large display. At the end sit the code as display text, the heading, one sentence, the one Shine Button (Browse titles in your region), a Select that checks any other region and answers in a polite line, and a Collapsible about VPNs. At the start, drawn first on a large screen, is a tile map of six regions in a rough geographic arrangement: solid where the title is licensed, dashed where it isn't, the region being checked ringed, and every tile saying Available or Not available in words as well as in shape. The licensing and the example region are typed: nothing here looks up where you are. For streaming, publishing and any licence that follows the viewer.
FAQ
Does the page detect where I am?
No. Europe is a typed constant (HOME) standing in for the viewer's region, and the licensing of each region is typed in REGIONS. Nothing reads a location, an IP address or the browser's geolocation, and the sentence under the heading says so. In your app, work out the region on your server, offer a manual choice for people it gets wrong, and pass the result in.
What does Check another region do?
It answers locally. Choosing a region moves the ring on the map to its tile and writes one line, "Asia: available" or "Europe: not available", with a few of its countries in words. The line is a polite status, so a screen reader hears it, and the map keeps the same size whichever region you choose. To wire it for real, read the licence for the chosen region from your catalogue.
How is the map read without seeing it?
The tiles are a real list, one item per region, and each says Available or Not available in words as well as in shape (a tick or a dash, a solid or a dashed border). The region being checked carries aria-current as well as its ring. The map is spatial, so it never flips in a right-to-left layout.
Why mention a VPN at all?
Because people ask. The note is closed by default and says only what is true: a VPN changes the address a site sees, not where someone is, and a licence that follows the viewer's region isn't changed by it. It doesn't tell anyone to use one or not to. Edit or drop it to match your terms.