shadcn.io is not affiliated with official shadcn/ui
Kiosk Mode Login Block for Svelte
A shared-device check-in: large touch keys for a six-digit badge, a private session with a 30-second demo countdown that starts on the press, Extend, Still there? and a screen that clears itself.
Installation
Overview
Sign people in on a screen that other people use next, with this kiosk mode login block for Svelte with Ark UI. It's the check-in of a Lobbyline front desk: a whole screen with the page's rails and one band across it, a centred column built for fingers. A status row names the kiosk and carries a marker for whether a private session is open. Six dots show the digits of a visitor badge over a real field, so typed digits, paste and Enter all work, with a keypad of three by four large keys on hairline cells and the one Shine Button, Check in, quiet until all six digits are in. A right badge opens a short session at demo speed: a countdown from 30 seconds starts on the press, "Still there?" appears in the last ten, Extend adds another thirty, and when it runs out, or on Sign out, the screen clears itself and says so. It's built from Button, Badge, Shine Button and Guides, with a CSS entrance only. For lobbies, reception tablets, shared workstations and shop-floor terminals.
FAQ
What stays in the page, and how do I wire it for real?
Everything. The badge is one typed value printed once under the dots, the session is a counter in the page, and nobody is told you arrived. In a product, look the badge up on the front desk's server, start a session there and end it there when the timer runs out or someone signs out: a kiosk must never trust its own screen to keep a session closed, and should wipe the screen's state as well.
How does the countdown work?
It starts on the press, not on load. One timeout at a time counts a second off a number kept in the page, so there is no interval running when no session is open, and the status line speaks only at the start, at ten seconds ("Still there?") and at the end, never every second. Under reduced motion the changing seconds give way to a sentence that says the session ends in 30 seconds unless you extend it.
Why can I extend, and why does it ask?
A timeout that cannot be extended takes control away from people who need more time, which is a failure of the web accessibility guidelines. In the last ten seconds the page asks "Still there?" and Extend gives another thirty seconds. A real kiosk would also end a session on a long idle, and this one does the same at demo speed.
Does it work with a keyboard as well as touch?
Yes. The dots sit over a real password field that takes typed digits, paste and Enter, and digits and Backspace typed while a key has focus do what the keypad does. The keys are large, at least 56 pixels tall on a phone and 80 on a wide screen, and keep that size at every width.
What does it clear, and what does Private session mean?
Signing out, or the timer ending, empties the digits, closes the session pane and returns focus to the badge field. The marker in the status row says whether a session is open. In a product it would also clear anything a visitor typed or opened, and never store a badge or a session in the browser.