Skip to content
Buy
Auth & Onboarding
A. Auth & Onboarding

Sign In & Sign Up

Every way into the product — split layouts, centered cards, magic links, SSO, multi-step registration and password recovery.

19 screensDesktop · Tablet · MobileLight · Dark

Write every screen of this block into your project — the source is then yours to edit.

bash
npx @wunderui/cli add auth/sign-in

01Sign In — Split with brand panel

Uses: Input · SocialSignInButtons · DividerWithLabel · Checkbox · TextLinkRow · UserInfo

components/blocks/auth/sign-in/01-split-brand-panel.tsx

02Sign In — Centered card

Uses: Card · Input · SocialSignInButtons · DividerWithLabel · Checkbox · TextLinkRow

components/blocks/auth/sign-in/02-centered-card.tsx

03Sign In — Visual left, passkey

Uses: Input · UserInfo · Checkbox · TextLinkRow · Button

components/blocks/auth/sign-in/03-visual-left-passkey.tsx

05Sign In — SSO / enterprise (domain first)

Uses: Input · Badge · DividerWithLabel · TextLinkRow

components/blocks/auth/sign-in/05-sso-enterprise.tsx

06Sign In — Account locked

Uses: OptionRow · InlineNote · Button

components/blocks/auth/sign-in/06-account-locked.tsx

07Sign Up — Split with benefits panel

Uses: Input · SocialSignInButtons · PasswordStrength · Checkbox · TextLinkRow · AvatarGroup

components/blocks/auth/sign-in/07-sign-up-split-benefits.tsx

08Sign Up — Centered card with password rules

Uses: Input · PasswordRequirement · SocialSignInButtons · Checkbox · TextLinkRow

components/blocks/auth/sign-in/08-sign-up-password-rules.tsx

09Sign Up — Multi-step (account → workspace)

Uses: Stepper · Input · OptionRowGroup · Button

components/blocks/auth/sign-in/09-sign-up-multi-step.tsx

10Sign Up — Email verification pending

Uses: TextLinkRow · Button

components/blocks/auth/sign-in/10-sign-up-verification-pending.tsx

11Sign Up — Social-first card

Uses: SocialSignInButtons · DividerWithLabel · Input · Button

components/blocks/auth/sign-in/11-sign-up-social-first.tsx

12Sign Up — Registration card

Uses: Input · Button · InlineNote

components/blocks/auth/sign-in/12-sign-up-registration-card.tsx

14Forgot Password — Check your email

Uses: TextLinkRow · Button

components/blocks/auth/sign-in/14-forgot-check-email.tsx

15Forgot Password — Set new password

Uses: PasswordRequirement · PasswordStrength · Input · TextLinkRow

components/blocks/auth/sign-in/15-forgot-set-new-password.tsx

16Forgot Password — Password reset success

Uses: Button · TextLinkRow

components/blocks/auth/sign-in/16-forgot-success.tsx

17Forgot Password — Reset password card

Uses: Input · Separator · TextLinkRow

components/blocks/auth/sign-in/17-forgot-reset-card.tsx

18Verification — Enter verification code

Uses: OtpCodeInput · TextLinkRow · Button

components/blocks/auth/sign-in/18-verification-code.tsx

19Verification — Check your email (modal)

Uses: Dialog · TextLinkRow · Button

components/blocks/auth/sign-in/19-verification-check-email-modal.tsx

OTP / 2FA Verification →