shadcn.io is not affiliated with official shadcn/ui
Profile Switch Login Block for Ark UI
A who is watching page: four profile tiles with initials and a lock, an Add profile tile, an Edit mode that turns names into fields and shows Remove with a permanent Undo, and a four-digit PIN for the locked profile.
Installation
Overview
Ask who is using the screen, with this profile switch login block for React with Ark UI. It's the who is watching page of Couchlight, a family TV service: the page's side rails run the full height of the screen and one band crosses it between two rules, holding one centered column. Four profiles sit in an open row as large initials tiles, one of them with a lock, and an Add profile tile ends the row. Choosing a tile selects it; the locked one asks for its four-digit Input OTP PIN in the space under the row, with the demo PIN printed there, and the one Shine Button reads Watch as Ludo or Unlock Parents. Edit profiles turns every name into a field you can type in and shows Remove under each tile; a removal says so in the status line and a permanent Undo puts the last one back, and the last profile cannot be removed. Nothing changes the page's height. It's built from Input OTP, Input, Button, Shine Button and Guides, with native radio inputs and a CSS entrance only. For streaming, learning and family apps that share one sign-in.
FAQ
What stays in the page, and how do I wire it for real?
Everything. The four profiles, the lock on one of them and its PIN (1234, printed under the field) are typed, and renaming, removing and adding only change the page's state. In a product, store profiles on the account, hold a PIN as a salted hash on your server (never in the page), and count wrong tries there.
How does Edit mode work?
Edit profiles is a toggle (pressed while editing). While it is on, each name becomes a text field, saved as you type (ten characters at most; Enter keeps the name and returns to the tile, and an emptied name goes back to what it was), and Remove appears under each tile. The room for both is always reserved, so turning it on or off never moves the tiles. The main button reads Done editing, and does the same as the toggle.
How do removal and Undo work?
Remove takes a profile off the TV, the status line says "Removed Kids. 3 profiles remain." and focus moves to the next tile. Undo is always on the page, quiet until there is something to undo, and puts the last removed profile back in its place, one step at a time. The last profile can't be removed: its Remove button stays but says why. Nothing disappears on a timer.
How does the PIN gate work?
Choosing Parents moves focus to a four-digit field and prints the demo PIN beneath it. Digits only are kept, a paste is cleaned the same way, and Enter sends the form. A wrong or short PIN says so in one line and clears the field; nothing locks you out in the demo. The field reads left to right whatever the page direction, and an Unlock button takes the place of Watch.