# 6 Login & Sign Up Page Components for React

> Authentication screens for apps: split brand-panel sign-in, social login cards, six-digit OTP verification, multi-step sign-up, password strength meters and magic-link confirmation.

3 of 6 free (the rest with PixelPapa Pro), built with Tailwind CSS and Motion, installable with the shadcn CLI.

- [Auth Card Social](https://pixelpapa.com/components/auth/auth-card-social.md): A centred sign-in card with generic provider buttons that show their own loading state, and an email step that unfolds a password field once the address is valid.
- [Auth Magic Link Sent](https://pixelpapa.com/components/auth/auth-magic-link-sent.md): A check-your-inbox screen: an envelope opens and its letter lifts on a loop, a ring counts down to when resend unlocks, and the address can be changed in place.
- [Auth OTP Verify](https://pixelpapa.com/components/auth/auth-otp-verify.md) (Pro): A six-box verification screen with auto-advance, backspace, arrow keys and paste; digits pop in, a wrong code shakes and clears, the right one ripples green.
- [Auth Password Strength](https://pixelpapa.com/components/auth/auth-password-strength.md): A set-password screen with a four-segment meter that fills and recolours as you type, a requirements checklist that ticks off live and a one-click strong suggestion.
- [Auth Signup Steps](https://pixelpapa.com/components/auth/auth-signup-steps.md) (Pro): A three-step sign-up card with a filling progress rail, steps that slide in the direction of travel, a live workspace URL preview and a celebratory finish.
- [Auth Split Brand Panel](https://pixelpapa.com/components/auth/auth-split-brand-panel.md) (Pro): Sign-in form on one side and a brand panel on the other, where collaborators orbit a logo on slow rings and customer quotes rotate on a timer.