A choose-an-account screen with gradient avatars, workspace badges and signed-in dots, full arrow key navigation, a remembered device chip, a Use another account row and a remove mode.
to continue to Relay
This Mac is remembered · Lisbon, PTSigning in shares your name, email and photo with Relay.
npx shadcn@latest add https://hyperblur.dev/r/login-account-chooser.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/login-account-chooser.tsx.
import { LoginAccountChooser } from "@/components/hyperblur/login-account-chooser"
<LoginAccountChooser app="Relay" onItemSelect={(a) => signInAs(a.id)} onUseAnother={() => router.push("/login")} />| Prop | Type | Default | Description |
|---|---|---|---|
| app | string | "Relay" | App the user is signing in to. |
| title | string | "Choose an account" | Heading. |
| accounts | { id: string; name: string; email: string; workspace?: string; signedIn?: boolean; hue?: number }[] | Three accounts | Initial accounts. Hue (0 to 360) colors the avatar gradient. |
| device | string | null | "This Mac is remembered · Lisbon, PT" | Remembered device chip. Pass null to hide it. |
| onItemSelect | (account: LoginAccount) => boolean | void | Promise<boolean | void> | Called when an account is chosen with click, Enter or Space. Return false to show an error. | |
| onUseAnother | () => void | Called when Use another account is chosen. | |
| onRemove | (account: LoginAccount) => void | Called when an account is removed in remove mode. | |
| accent | string | "#ff7a59" | Accent color for buttons, focus rings and highlights. |