Each auth page uses a split-panel design: the left half shows a coloured branding panel using the primary container token, while the right half contains the form. On mobile, only the form panel is visible. The blue seed colour gives a trustworthy, professional feel ideal for authentication flows.
Each auth page uses a split-panel design: the left half shows a coloured branding panel using the primary container token, while the right half contains the form. On mobile, only the form panel is visible. The blue seed colour gives a trustworthy, professional feel ideal for authentication flows.
View Live PreviewSign in page with email and social login options
Sign up page with first/last name, email, and password
Password reset page with email input
Split-panel layout — branded left, form right
Google and GitHub social login buttons
Remember me checkbox and forgot-password link
Responsive stacking on small screens
Light/dark mode toggle per page
app/layout.tsx — Root layout with MD3Provider
app/providers.tsx — Theme with blue seed colour
app/page.tsx — Sign in page
app/signup/page.tsx — Sign up page
app/reset-password/page.tsx — Password reset
app/components/AuthLayout.tsx — Split-panel wrapper
npx degit your-org/md3-templates/auth my-authcd my-auth && npm installnpm run devOne-time purchase. Lifetime access and updates.
Live PreviewIncludes:
Full source code
Next.js App Router ready
TypeScript throughout
Light & dark mode
Customisable seed colour
Free updates