Auth pages
Log in, sign up, forgot password and email verification pages. Figma V8.0: layout types Simple, Simple header navigation, Card combined, Card separated and Split (image, quote, mockup), each responsive for Desktop and Mobile.
{ LoginPage, SignUpPage, ForgotPasswordPage, EmailVerificationPage } from "@pepulux/ui"Log in — Simple
Log in to your account
Welcome back! Please enter your details.
Don’t have an account? Sign up
Log in — Simple with header navigation
Log in to your account
Welcome back! Please enter your details.
Don’t have an account? Sign up
Log in — Card combined
Welcome back
Please enter your details.
Don’t have an account? Sign up
Log in — Card separated
Log in to your account
Welcome back! Please enter your details.
Don’t have an account? Sign up
Log in — Split image
Log in to your account
Welcome back! Please enter your details.
Don’t have an account? Sign up
Log in — Split quote image
Log in to your account
Welcome back! Please enter your details.
Don’t have an account? Sign up
Log in — Split mockup
Log in to your account
Welcome back! Please enter your details.
Don’t have an account? Sign up
Sign up
Same layout types as the login page.
Forgot password
Forgot password?
No worries, we’ll send you reset instructions.
Forgot password?
No worries, we’ll send you reset instructions.
Email verification
Check your email
We sent a verification link to olivia@pepulux.com
Didn’t receive the email?
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| layout | "simple" | "simple-header" | "card-combined" | "card-separated" | "split-image" | "split-quote" | "split-mockup" | "simple" | Figma Type — page layout. Mobile collapses the split panel automatically |
| image | string | — | Background image URL for split-image and split-quote |
| quote | AuthQuote | — | { text, name, role, company?, rating? } — testimonial on split-quote |
| mockup | ReactNode | — | Custom content for the split-mockup panel |
| headerLinks | { label, href }[] | — | Links in the top bar for simple-header |
| socials | SocialProvider[] | ["google"] | Social sign-in buttons (Login and Sign up) |
| onSocial | (social) => void | — | Called when a social button is clicked |
| onSubmit | (values) => void | — | Login: { email, password, remember } · Sign up: { name, email, password } · Forgot: email |
| title / description | string | — | Override the heading copy |
| showTabs | boolean | — | LoginPage — Sign up / Log in switcher (default true for simple) |
| string | — | EmailVerificationPage — address the link was sent to | |
| className | string | — | Extra classes on the page frame (e.g. min-h-screen) |