MiniDev UI

React login and signup components

Free React authentication components: sign in and sign up forms, magic link, social login, SSO, password reset, OTP and two factor setup screens.

12 itemsFree, MITshadcn CLI compatibleTailwind CSS v4Light and dark

Authentication is the first screen most users see, so it should be fast and calm. These screens cover the full journey: sign in, sign up, magic link, social providers, SSO, password reset and two factor verification.

They are UI only and work with any auth provider. Wire the submit handlers to Auth.js, Clerk, Supabase, Better Auth or your own API.

Components 11

Auth CarduiCentered Tailwind sign in card with a title, optional description, a slot for fields and providers, and a divided footer for sign up or reset links.npx shadcn@latest add ui.minidev.pro/r/auth-card.jsonForgot Password FormuiA 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 ui.minidev.pro/r/forgot-password-form.jsonJoin WorkspaceuiA centered card for joining a team workspace with an invite code: heading, helper text, a monospace code input and a full width Join button. Tailwind styled.npx shadcn@latest add ui.minidev.pro/r/join-workspace.jsonMagic Link FormuiA 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 ui.minidev.pro/r/magic-link-form.jsonOtp InputuiA React one time code input where one real input powers the slots, so paste, SMS autofill and screen readers work natively. Has groups, error shake and success.npx shadcn@latest add ui.minidev.pro/r/otp-input.jsonReset Password FormuiReset 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 ui.minidev.pro/r/reset-password-form.jsonSign Up FormuiCreate 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 ui.minidev.pro/r/sign-up-form.jsonSocial Auth RowuiTwo-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 ui.minidev.pro/r/social-auth-row.jsonSso Provider CarduiSSO provider card with a name, description, Configured or Not set badge, an enable switch and a Configure button. A React block for SAML and OIDC settings.npx shadcn@latest add ui.minidev.pro/r/sso-provider-card.jsonTwo Factor SetupuiTwo-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 ui.minidev.pro/r/two-factor-setup.jsonTwo Factor VerifyuiTwo-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 ui.minidev.pro/r/two-factor-verify.json

Blocks and full pages 1

Sign In PageblockA 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 ui.minidev.pro/r/sign-in-page.json

See them live

Galleries render these components with sample data in every state.

Frequently asked questions

Which auth provider do these use?

None. They are UI components that call your handlers, so you can connect any provider or your own backend.

Is there a one time code input?

Yes. The OTP input handles paste, auto advance, backspace across cells and numeric keyboards on mobile.

Can I add Google and GitHub login buttons?

Yes. The social auth row renders provider buttons with icons and consistent sizing.

Related categories

React form components React settings page components React email templates