shadcn.io is not affiliated with official shadcn/ui
Age Verification Storefront Block for React
An age gate for an alcohol shop: a blurred drawn shelf behind a card that asks only for a date of birth in three selects, refuses dates that do not exist, and lifts the blur for anyone 21 or over.
Installation
Overview
Gate adult products without asking for documents, with this age check for React with Base UI. A header names the merchant and the rule. The panel's body is a fixed-height stage: a drawn shelf of bottles blurred with a CSS filter, and over it a gate card with day, month and year Native Selects, a Remember me tick and Enter the shop, the one Shine Button. The date is checked in the page against a typed date. A day that does not exist, such as 31 February, is refused in words; a future date is refused; someone under 21 sees the day they can come in, which is their 21st birthday; an adult lifts the blur and the card steps aside for a short welcome and a way to lock the shelf again. The result takes focus and the stage keeps its height. It's built from Native Select, Button, Shine Button and Guides, with a CSS entrance and blur only. For wine, spirits, vapes and other age-limited shops.
FAQ
How is the age worked out?
The 21st birthday is the date of birth plus 21 years in UTC. If that day is on or before the typed AS_OF date (9 Oct 2026) the visitor is in; otherwise the same date is shown as the day they can enter. A 29 February birthday moves to 1 March in years without one. Change MIN_AGE and AS_OF for your market.
Does it ask for ID?
No. It asks for a date of birth only and never reads a document. A date of birth alone is not proof of age; if the law in your market requires verification, add a provider's hosted check and keep this card as the first, friendly step.
What does Remember me do?
In this demo it only changes the status line to Remembered in this demo, and no cookie or storage is written. In production set a signed, short-lived cookie after a server check, and say so in your privacy text.
How does the blur work?
The drawn shelf sits in its own layer with a blur filter that is removed when the visitor is verified, with a transition that is switched off for reduced motion. Swap the drawing for a photograph of your shelf, and keep the gate card above it.