shadcn.io is not affiliated with official shadcn/ui
Sign-in Methods Settings Block for Ark UI
A sign-in methods settings panel with five methods you can switch and reorder, a drawn sign-in card that is redrawn from them, a last-method guard and a lockout rule that restates itself.
Installation
Overview
Decide how people sign in and see the result before you save it, with this sign-in methods settings panel for React with Ark UI. A hairline frame with a plus mark on each corner holds five rows (password, email link, passkey, Google and GitHub), each with a Switch, a short line about it and a pair of Move up and Move down buttons. Beside the rows, and above them on a phone, a greyscale sign-in card is drawn from exactly what is on: only the enabled methods, in the order they are listed, the first as the solid button and the rest as outline buttons, with a sentence under it that says the same in words. The last method that is on can't be turned off: the switch stays on and a message says why. A second band sets how many wrong passwords lock an account and for how long, with a Number Input and a Native Select, and a sentence that restates the rule or says it only applies once Password is back on. The action foot counts unsaved changes beside a Shine Button that saves them and an outline button that discards them. It's built from Switch, Number Input, Native Select, Field, Button, Shine Button and Guides, with a CSS entrance only. Google and GitHub are named in text with a two-letter tile and nothing connects. For a product that offers more than one way in.
FAQ
How do I use my own methods?
Edit METHODS at the top: each has an id, a name, a hint, the line its button says on the drawn card and, for a service, the two letters of its tile. SAVED holds which are on and in what order, plus the lockout. The drawn card, the sentence under it, the counts and the lockout sentence are all worked out from that state, so nothing is typed twice. Put your own logos in the tile slots if you have the rights to them; the tiles are lettermarks on purpose.
What does the last-method guard do?
If only one method is on and you switch it off, the change is refused: the switch is put back, a message under the list says nobody could sign in, the status line says it too and focus stays on that switch. Any other method can be turned off freely, and turning one back on never needs a check. Enforce the same rule on your server, since a form on a page can't stop a request that skips it.
How does ordering work, and who can use it?
Move up and Move down are real buttons named for the method ("Move Passkey up"), with the first one's Up and the last one's Down left in place but saying there is nowhere to go. After a move, focus stays on the button you pressed, or on the other one when that one has reached an end, and the status line says where the method went ("Moved Passkey to position 1 of 5."). Reordering counts as one change. Methods that are off are moved too, so they keep their place when they come back. There is no drag handle, so it works the same by keyboard and by touch.
What stays local, and how do I make it real?
Everything. Nothing signs in, saves or connects: the switches, the order and the lockout live in this page's state, Save only says what it kept, and Google and GitHub are text. To make it real, send the saved methods and their order to your auth service, render the real sign-in page from the same list, and apply the lockout where passwords are checked. Brute-force limits belong on the server, per account and per address.
How does it look on a phone, and is it accessible?
The drawn card comes first, then the rows, one per line with the same two move buttons and the switch, then the lockout band stacked, and the action foot is pinned to the bottom of the screen. The drawn card is hidden from assistive technology and restated by the sentence under it; every row is named ("Google sign-in") and says where it stands ("Google, shown 3" or "off"), and the status line is a polite live region present from the start.