Sign In Page
blockA centered Tailwind sign in page in an auth card with social login buttons, email and password fields, a full width submit and a sign up link in the footer.
npx shadcn@latest add @minidev/sign-in-pageCode Login, signup and auth pages for React
Free login and signup components for React and Tailwind CSS v4: sign in page, sign up form, social auth buttons, magic link, password reset, two-factor setup and verification. MIT.
11 blocksFree, MITshadcn CLI compatibleTailwind CSS v4Light and dark
Auth pages are the same on every product and still get built from scratch every time. These blocks cover the full set: sign in, sign up, social buttons, magic link, forgot and reset password, and two-factor setup and verification, all on one AuthCard shell.
Create account form with GitHub and Google buttons, required name, email and password fields, a submit button and a Sign in link, all inside an AuthCard.
npx shadcn@latest add @minidev/sign-up-formCode Two-column row of Continue with GitHub and Continue with Google buttons with click handlers, ready to sit above email fields on sign in and sign up screens.
npx shadcn@latest add @minidev/social-auth-rowCode A passwordless sign in card with an email field and a Send link button that passes the address to onSend. Built from AuthCard, FormField and Input.
npx shadcn@latest add @minidev/magic-link-formCode A password reset request card with one email field and a full width Send reset email button, composed from AuthCard, FormField and Input in React.
npx shadcn@latest add @minidev/forgot-password-formCode Reset password card with new password and confirm password fields and a full-width Update password button, built from AuthCard, FormField and Input in React.
npx shadcn@latest add @minidev/reset-password-formCode Two-factor setup card with a QR code area, a one-time code input and a Verify and enable button, guiding users through linking an authenticator app in React.
npx shadcn@latest add @minidev/two-factor-setupCode Two-factor verification screen with a one-time password input and a full-width Verify button inside an auth card. Use it as the second step after sign in.
npx shadcn@latest add @minidev/two-factor-verifyCode A React password field with a four step strength meter and a live rule checklist. Announces the score politely and accepts your own scorer such as zxcvbn.
npx shadcn@latest add @minidev/password-strengthCode Frequently asked questions
Do these work with Clerk, Auth.js or Supabase?
Yes. They are forms and layouts with no auth logic inside, so you wire the submit handlers to whichever provider you use.