Glassmorphic Auth Card
A production-ready glassmorphic auth card component for your Next.js application. Accessible, customizable, and built with modern standards.
Glassmorphic Auth Card
A premium authentication surface with frosted-glass, smooth transitions, and accessible inputs. Designed to read clearly in light and dark themes using token-driven colors.
Key Features
- Login/Register toggle with spring transitions
- Light/Dark readiness via Tailwind tokens
- Accessible label, placeholder, and focus styles
Usage Notes
- Place inside a centered container with neutral background.
- Use your brand tokens for foreground/background/border.
- Connect
onSubmitto your auth endpoint.
- Auth pages
- Modals
- Onboarding
| Name | Type | Default | Description |
|---|---|---|---|
| variant | 'login' | 'register' | 'login' | Initial view to display. |
| onSubmit | (data: any) => void | - | Submit handler callback. |
| className | string | - | Additional CSS classes. |
Most components here are inspired by outstanding libraries and creators in the ecosystem. I don’t claim to be the original author — this is my space for learning, rebuilding, and understanding great work at a deeper level.
I’m still a student of the craft, constantly studying the best and translating what I learn through my own perspective. Every piece reflects curiosity, respect for the community, and small creative touches that feel true to me.
I’ve done my best to credit inspirations properly. If anything is missing or inaccurate, I truly appreciate a message so it can be corrected with care.