shadcn.io is not affiliated with official shadcn/ui
Recent Accounts Login Block for Radix UI
An account chooser: three recent accounts as hairline rows with initials and a session state, Remove with a permanent Undo, and a password, a plain Continue or an email and password pair under the list.
Installation
Overview
Let people pick up as who they were, with this recent accounts login block for React with Radix UI. It's the account chooser of Reamhouse, a document suite, as a sign-in page: the page's side rails run the full height of the screen and one band crosses it between two rules, holding one centered column. A framed list of hairline rows holds the three accounts this browser used lately, each with initials, a name, an email and "Session active" or "Signed out" beside a filled or a hollow dot, and Use another account as its last row. Choosing an account fills the space under the list: a password field for a signed-out one, a plain Continue for one whose session is still active, an email and password pair for another account, and the chosen row stays in place. Remove on a row takes it off the list, a status line says so and a permanent Undo puts the last one back; the frame keeps its size and shows an Empty state when none remain. It's built from Empty, Field, Password Input, Button, Shine Button and Guides, with native radio inputs and a CSS entrance only. For suites and portals where several people or accounts share a browser.
FAQ
What stays in the page, and how do I wire it for real?
Everything. The three accounts and which of them has an open session are typed, any password is accepted, and removing an account only changes the page's state. In a product, keep the remembered accounts on the device (never their passwords), list only the accounts the person chose to remember, and for an open session ask your server to confirm it before continuing.
What does each kind of account ask for?
A signed-out account asks for its password, with its email shown above the field. An account with an active session needs none and the button says Continue as and the first name. Use another account asks for an email and a password. The button's label follows the choice, and before a choice it is quiet and says "Choose an account".
How do Remove and Undo work?
Remove takes an account off this browser's list, the status line says "Removed Henrik Dahlgren. 2 accounts remain." and focus moves to the next row. Undo is always on the page, quiet until there is something to undo, and puts the last removed account back in its old place, one step at a time. Nothing disappears on a timer.
What shows when every account is removed?
An empty state takes the rows' place inside the same frame, so the page keeps its height. It says Undo brings the last one back and offers Use another account, which opens the email and password pair.
Why initials and not photos?
A sign-in page shouldn't load or show a person's picture before they have signed in, and an initials tile never goes stale or fails to load. The tile is drawn for the eye only; the row is named by the person's name and described by the session state and email.
How does it work with a keyboard?
The rows are native radio inputs in one group, so the arrow keys move between them, and the Remove buttons are Tab stops of their own. Enter in a password field sends the form. The session dot is drawn filled or hollow and the state is also written as a word, never a color.