shadcn.io is not affiliated with official shadcn/ui
Parental Gate Login Block for Ark UI
A grown-ups' gate for a kids' app: a sum to type in digits that moves to the next of three questions when wrong, then a four-digit parent PIN, with an honest note that it is not age verification.
Installation
Overview
Put a short check between a child and a parent's settings, with this parental gate login block for React with Ark UI. It's the gate of Pebblereads, a kids' reading app: a whole screen with the page's rails and one band across it, start-aligned and friendly, with a mark, three drawn pebbles, a heading and one sentence. The gate has two steps in one space. First a question only a grown-up is likely to answer quickly, a sum to type in digits ("What is twelve times eight?") in an Input; a wrong answer says "Not quite" and moves to the next of three typed questions. Then the parent PIN, four digits in the Input OTP field. A right PIN opens a short grown-up settings state with a way back. The answer and the PIN are printed once as hints so anyone can pass the demo. The one Shine Button runs both steps, and under it a plain note says this is a gate, not age verification. It's built from Field, Input, Input OTP, Button, Shine Button and Guides, with a CSS entrance only. For children's apps, family accounts and settings that a young reader should not open by accident.
FAQ
What stays in the page, and how do I wire it for real?
Everything. The three questions, their answers and the PIN are typed constants printed as hints, and nothing is stored or sent. In a product, keep the parent PIN on your server (or in the device's keystore), compare it there, rate-limit wrong guesses, and ask the question from a larger set in a random order so a child cannot learn them. A gate like this protects against accidents, not against a determined child.
Is this age verification?
No, and the page says so under the button. A sum slows a young reader down and a PIN keeps a settings screen closed, but nothing here can tell who is holding the device or how old they are. If a law or a store policy asks for a real age check, use your platform's parental controls, an adult account or a verification service, and treat this gate as a convenience on top.
What happens on a wrong answer?
The page says "Not quite. Here is another one.", clears the field, puts focus back in it and shows the next of the three questions, wrapping round after the last. A right answer moves on to the PIN step. Pressing with nothing typed names the problem and focuses the field instead.
How does the PIN field work?
It is the catalog's code field with four slots: it takes digits only, a paste of the whole PIN fills all four, and Enter presses the button. A wrong PIN clears the slots, says so under them and focuses the first slot. A right one waits half a second and opens the settings state, with a button that closes the gate again.
Is it usable with a keyboard and a screen reader?
Yes. Each step has a labelled field, the question is the label, each problem is read with its field, and the page's one status line speaks each result. The step that is not showing is hidden and inert, so the tab order only ever holds the current one.