A luminous frame
Cyan bloom and a moving magenta edge surround the circular dark form, matching the supplied neon reference.
Component 039Forms
Neon Ring Auth
A glowing cyan and magenta circular frame surrounds dark inset form fields, rotating between login and account creation.
- React
- Tailwind CSS
- TypeScript
Switch between login and sign-up, reveal a password, or try account recovery.
Loading preview…
Live interactive previewExplore the interaction, then make it yours.
Loading component source…
Quick start
Make it yours.
Save neon-ring-auth.tsx in your components folder, then import it below. Requires React and Tailwind CSS.
TSXapp/page.tsx
import NeonRingAuth from "@/components/ui/neon-ring-auth";
export default function Page() {
return <NeonRingAuth />;
}Behind the interaction
The details that make it work.
Two sides of the form
Login and sign-up trade places through a rotating transition, with remember-me and password visibility controls.
Ready for your service
Typed async actions, validation, cancellation, and error feedback keep the reusable component practical.
Keep exploring