shadcn.io is not affiliated with official shadcn/ui
Sign-in Accessibility Settings Account Block for Svelte
A tuner for the sign-in code screen with three tabs (Timing, Input and Motion) beside a drawn copy of the screen that follows every change: a code lifetime slider from 1 to 10 minutes, extra-time prompt, large digit boxes, pasting, password display and reduced motion.
Installation
Overview
Let people tune the sign-in code screen and watch it change, with this sign-in accessibility panel for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds a tuner at the start and a drawn copy of the screen at the end. The tuner is three Tabs: Timing has a Slider for how many minutes a code lasts, from 1 to 10, and a Switch for an extra-time prompt; Input has switches for large digit boxes, pasting a code and showing the backup password by default; Motion has a switch for reduced motion. The drawn screen follows every change at one fixed height: the six digit boxes grow, "Code expires in 6 minutes" counts, and "Need more time?" and "Paste code" appear or are held in place unseen. In the page's order the preview comes first, so on a phone it sits above the tabs, and a caption says the same thing in words. The foot has a Shine Button that saves the choices in this page and an outline Button that discards them. It's built from Tabs, Slider, Switch, Button, Shine Button and Guides, with a CSS entrance only. For the account or security page of any product that sends sign-in codes.
FAQ
How do I change the settings and the screen?
Edit the constants at the top. Tuning lists every setting, SAVED is what the account has stored when the page opens, MIN_MINUTES and MAX_MINUTES bound the slider, and DIGITS is the code the drawing shows. CodeScreen is one small component that reads a Tuning, so a new setting is one field, one switch row and one line in the drawing and in summaryOf.
Why does the preview not move when I change something?
Because every state of the drawn screen is held in place: the boxes sit in a row as tall as the large ones, the optional lines are hidden with invisible rather than removed, and the caption under it reserves its lines. The tabs also share one height, taken from the tallest of the three, so switching tabs never moves the foot.
What does reduce motion change here?
Only the drawn screen's description and the entrance of its boxes in a real sign-in flow: the preview says "Reduced motion: the boxes appear at once" or "Motion on: the boxes fade in one by one", and nothing in the block loops. The block's own entrance already respects your device's reduced-motion setting whatever the switch says.
What stays local, and how do I make it real?
All of it. The drawing is not a real sign-in screen, no code is sent and Save keeps the six values in this page, saying "Saved 3 changes in this demo. Nothing is stored." To make it real, store the Tuning on the account, read it in your sign-in screen (the lifetime for the code, the flags for the prompt, boxes, paste, password and motion) and keep the drawing as the account page's preview of it.
Is it accessible, and how does it look on a phone?
The tabs are a real tab list with arrow-key movement, every switch has a name and a hint, the slider announces "6 minutes", the drawing is hidden from assistive technology because its caption says the same in words, and the foot is a polite live region that reads out what each change did. On a phone the preview comes first, the tabs follow, and the foot with Save stays pinned to the bottom of the screen.