shadcn.io is not affiliated with official shadcn/ui
Country Restricted Error Block for Vue
A full-screen page for a country a service hasn't launched in: a roadmap of four planned regions with the quarter each opens, a Switch per region, an email field and a Join waitlist button that counts the regions chosen.
Installation
Overview
Turn a dead end into a waitlist, with this country restricted page for Vue with Ark UI. It's the screen Hopstep, a scooter-rental app, shows a rider in a country it hasn't launched in: 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. Under the heading "Hopstep isn't in Spain yet", a roadmap of four planned regions is ruled from rail to rail with Guides. Each row has the region's name, the quarter it opens, a four-cell strip with that quarter solid, and a Switch named "Tell me when it opens". One Input takes an email address, and the Shine Button is the only coloured control: its label counts the regions switched on ("Join 2 waitlists"). A press checks that a region and a full address are given, writes each problem under its place and focuses the first; a good press marks the rows "On the list" and says so, with an Undo that takes you off again. Nothing is sent. On a phone the button is pinned to the foot of the screen. For any product that launches country by country.
FAQ
What does Join a waitlist do, and what stays in the page?
Nothing leaves the page and nothing is saved. A good press shows a spinner on the button for under a second, then marks the chosen rows "On the list" and a polite status line says that no email was sent; focus moves to that line because the busy button drops it. Undo is always there, quiet until you have joined, and clears the marks. To wire it for real, save the address with the chosen region ids from submit, send a confirmation to the address, and email once per region on its opening day.
Does the page find out where I am?
No. "Spain" is a typed constant (HOME) standing in for the visitor's country, and nothing reads a location, an IP address or the browser's geolocation. In your app, work out the country on your server (from the request, with a manual choice for people it gets wrong) and pass it in; the page's heading, the "your country" note on its row and the one switch that starts on all follow from it.
Where do the quarters come from?
From the REGIONS list at the top of the file: each region has a name and the index of the quarter it opens in, and the strip, the words "Opens Q2 2027" and the count under the heading are all worked out from it, so the drawing and the text can't disagree. The strip is decoration: the quarter is always in the row's own text. Edit the list and the order, the strips and the label of the button follow.
Are the switches accessible?
Yes. Each Switch is named for its region ("Tell me when Canada opens"), so a screen reader hears the region and its state, and Tab and Space work as for any switch. The Switch is drawn in the foreground colour so the button stays the one coloured control. If none is on when you press Join, a short line under the list says to switch one on, an alert for assistive technology, and focus moves to the first switch.
How does the form check the address?
On press, never on every keystroke: an empty field or an address without an at sign and a dot-separated domain gets a line under the field in the text colour with a red icon, and focus goes to the first problem. The line always has its space, so the form never jumps. The check is only a shape check; your server should confirm the address by emailing it.
Should this page return an error status?
Your server decides what to send. A service withheld from a country for legal or licensing reasons is usually a 451 or a 403 with this screen as the body; a service that simply hasn't launched there could also be a normal 200 with a "coming soon" page. Send the real status where you render this page.