Sign In
Freev1.0.0A passwordless sign-in with SSO routing, one-time codes, passkeys and social sign-in.
Build for your project
Code/install build
Usage
Import it and pass your content. The props that matter most are listed next.
Example
import { SignIn } from "@/components/ui/notchset/blocks/sign-in";
export function Login() {
return (
<SignIn
brand={{ name: "Relay" }}
onRequestCode={async (email) => {
await fetch("/api/auth/code", { method: "POST", body: JSON.stringify({ email }) });
}}
onVerify={async (email, code) => {
const res = await fetch("/api/auth/verify", { method: "POST", body: JSON.stringify({ email, code }) });
return res.ok;
}}
next={{ label: "OPENING /AGENTS", onOpen: () => location.assign("/agents") }}
/>
);
}Props
onRequestCode / onVerify–(email, signUp) => Promise / (email, code) => Promise<boolean>Send a code (the same answer whether or not the account exists) and check it.
detectSso / onSso–(email) => Promise<SsoMatch | null> / (email, sso) => Promise<string>Route an SSO domain to its provider; onSso resolves with who signed in.
providers–{ id, label, icon?, onSignIn() => Promise<string> }[]Passkey and social sign-in; the last one used is marked on this device.
next–{ label, onOpen? }Where the done state goes ("OPENING /AGENTS").
brand / aside / termsLink / footer–…The mark, the ink panel (hidden under 760px), the terms link in sign-up and the footer line.
Anatomy
- The code step is the Input OTP verify; the mode switch is the Segmented Control.
- Every auth decision comes from your promises; the block only shows the outcome.
- The last provider used is remembered on the device only.
SignIndata-slot="sign-in"Email, code and done steps, with SSO and providers.
Source
components/ui/notchset/blocks/sign-in.tsx
Loading the code
Build for your project
Code/install build
Installation
Base UI
pnpm dlx shadcn@latest add https://beautiful-ui.dev/r/sign-in.jsonRadix
pnpm dlx shadcn@latest add https://beautiful-ui.dev/r/radix-nova/sign-in.jsonFree, no account or key. Use the command for your project's primitives: a radix-*, new-york or default style in components.json is Radix, a base-* style is Base UI. With the @beautiful-ui registry added, @beautiful-ui/<name> picks for you.
Install by hand
- 1. Add the packages
pnpm add class-variance-authority@^0.7 - 2. Copy the files to these paths (the source, or save them all as a .zip)
- components/ui/notchset/blocks/sign-in.tsx
- lib/beautiful-ui/notchset/instrument.tsx
- lib/beautiful-ui/notchset/root.ts
- lib/beautiful-ui/notchset/button-variants.ts
- lib/beautiful-ui/notchset/field-classes.ts
- 3. No stylesheet needed.
- 4. Install what it builds on first: shadcn's cn helper (lib/utils.ts, from npx shadcn init), Input OTP, Segmented Control, the theme foundation (its tokens and base styles)
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
For coding agents
Give your coding assistant the Markdown guide instead of screenshots.
Use it for
- A product's sign-in and sign-up page
- Teams whose admins enforce single sign-on
Use something else when
- Passwords are required: add a password step of your own
- A checkout's guest email: a plain field is enough
Mistakes to avoid
- Decide SSO on the server too: the client only routes
- Rate-limit code sends and attempts, and expire codes after 10 minutes
- Never use LAST USED to reveal whether an account exists
Agents find it by
- sign in, login, sign up, passwordless, magic code, one-time code, otp login, sso, single sign-on, okta, passkey, auth page, Notchset
Where agents read it
- Guide for this component: https://beautiful-ui.dev/md/sign-in.md
- Every component, for tools without MCP: /llms.txt
- MCP server:
https://beautiful-ui.dev/api/mcp(setup)
Behaviour
Keyboard
- Enter
- Continue from the email
- ← →
- Switch between sign in and create account
- Type or paste
- The code submits itself at 6 digits
Accessibility
- The section is named by its step; fields have labels, mark invalid input (aria-invalid) and announce hints (aria-live)
- The terms checkbox is a real checkbox (role, aria-checked); errors that block a step are alerts
- The code is one real input (one-time-code autocomplete, numeric) under the cells, so paste and autofill work
- The brand panel is decorative (aria-hidden)
Motion
- Mode and step
- Content rises 6px as it fades in (300ms)
- SSO
- The organisation card unrolls (360ms) and the key's label changes
- Code
- Digits pop in; a wrong code shakes and clears; resend rolls down
- Working
- The scanner on whichever key is working
Responsive
- The brand panel hides under 760px (container width); the form fits 320px.
Performance
- The SSO lookup waits 280ms after typing stops, and only the newest answer is used.
Changelog
v1.0.0 · 2026-10-04
First release
