Search
Search components and blocks
Auth Blocks
Sign-in, sign-up, and account flows — login forms, OTP/passcode entry, and password reset built on shadcn primitives.
Signup Card
Open pageSocial buttons, name/email fields where only the very first character pops up from below — animating every keystroke reads as noisy, not delightful — a live 4-segment password-strength meter, a show/hide toggle that crossfades its icon, and the Checkbox component's grow-in tick for the terms row — Create account stays disabled until name, email, an 8+ character password, and the terms checkbox are all satisfied.
Create an account
Start building with DitherUI in seconds.
Already have an account? Sign in
Install
Props
className / ...div propsReact.ComponentProps<"div">—A two-step passwordless flow, not just a single form — social-proof (the same AvatarStack component, reused for 'N members'), Google as the primary path, and an email step that crossfades into a 6-digit OTP step once you continue. Each OTP box springs in staggered, auto-advances focus as you type, and the header badge swaps icon between steps. A back arrow returns to the email step without losing what you typed.
Props
workspacestring"DitherUI"memberCountnumber1855A sign-up modal on the Center Morph Modal with the pitch on the left and an image slot on the right, which is a dashed placeholder until you pass your own element to the media prop (it is hidden on phones). Google is the primary path. Continue with email collapses the Google button so the email field glides up into its place, then password, a Create account button and a back link open out beneath it one after another; submitting confirms the account and closes the modal. A works-with row of integration logos closes the pitch. Sample copy is for Relay, a fictional API monitor, so swap in your own.
Props
mediaReactNodeplaceholderonGoogle() => void—onEmail(email: string, password: string) => void—onSwitch() => void—The login twin of the Split Sign-up Modal, built from the same file so the two stay visually identical: the same Center Morph unfold, image slot and email flow. Continue with email collapses the Google button and the email field glides up, then password, Forgot password?, Log in and a back link open out beneath it, and a confirmation closes the modal. Pass onSwitch to either modal to show a link to the other. Sample copy is for Relay, a fictional API monitor.
Props
mediaReactNodeplaceholderonGoogle() => void—showGooglebooleantrueonGithub() => void— (button hidden)showEmailbooleantrueonEmail(email: string, password: string) => void—onMagicLink(email: string) => Promise<string | null>— (passwordless when set)onForgotPassword() => void—copyPartial<AuthCopy>—footerReactNodeintegrations striponSwitch() => void—A sign-out confirmation on the Motion Dialog. A warning badge springs in with a slow pulse ring and an arrow that keeps nudging out, the account email sits under the copy so it is clear which session is ending, and the footer is a full-bleed split by dividers: Stay signed in on the left, Sign out on the right. Sign out spins, flips to a green Signed out confirmation, then the dialog closes by itself and calls onSignOut.
Props
emailstring"maya@acme.com"onSignOut() => void— (called as the dialog closes)triggerReactNodeoutline Sign out button