shadcn.io is not affiliated with official shadcn/ui
Age Restricted Error Block for React Aria
A host page and the age gate in front of it: an alert dialog with two Tabs (a checkbox, or a date of birth in three selects) that works the age out against a fixed day, stores nothing, and unblurs the drawn page behind it when it passes.
Installation
Overview
Gate adult content without storing anything, with this age restricted gate for React with React Aria. The host is the cellar page of Casklane Club, a wine club that ships to adults only: a compact header whose outline Button, Verify age, opens the real Alert Dialog, and under it a stage with a drawn, blurred picture of the page. The gate is drawn open in place on that stage so it can be seen at once. It has two routes in Tabs: "I am 18 or older" is one Checkbox, and "Enter my date of birth" is three Native Selects for the month, day and year. The age is worked out against a day typed in the file, never the clock, and the date is thrown away as soon as it has been checked. Under 18 says so and the page stays locked; passing says "Verified for this session in this demo" and the drawn page unblurs. The Shine Button Continue is the only coloured control. For wine, spirits, adult content and any age-restricted store.
FAQ
Which part is only for the preview?
The in-place copy. On load the gate is drawn as a plain dialog element held open over the stage, so nothing is trapped or focused and the page around it stays usable. Pressing Verify age opens the real alert dialog, with its focus trap, Escape and focus return, and the in-place copy stays closed until a reload. In your app keep the alert dialog and drop the in-place copy: the "in-place" state, the scrim and its dialog, and the Escape effect.
Is a birth date ever stored?
No. The month, day and year live in the page's state only while the gate is open: pressing Continue checks them, then they are cleared whether or not the check passes, and closing the dialog clears them too. Only a yes or no is kept, and only until the page reloads. If your law asks for more than a statement (a document or a payment-card check), do that on your server; this block shows the question, not the proof.
Where does today's date come from?
From one AS_OF day typed at the top of the file, so the age is the same on the server and in every time zone and nothing reads the clock. A date that doesn't exist (31 February) or lies after that day is refused with a line saying what is wrong. In your app, take the date from the server.
What do Not now and Escape do?
They close the dialog and leave the page locked: a message on the stage says to use Verify age above, and focus goes back to that button. A click outside the dialog doesn't close it, so the gate is only left on purpose. Nothing is verified by closing it.
What does the page say to someone under 18?
That Casklane Club is for adults only, so the cellar stays closed, and that nothing was stored. The gate itself asks "Are you 18 or older?", so the limit is never a secret. Changing the date or the route and pressing Continue works again, as it would on any page that only checks a statement; if the law asks for more, check on your server and rate-limit the retries there.
How do the Tabs and selects work with the keyboard?
Tab reaches the Tabs and the arrow keys move between the two routes. The checkbox and the three selects are native controls with visible labels, so they work as in any form: Space ticks the box, and a letter or the arrow keys change a select. Both routes have the same height, so choosing one never moves the dialog.