Overview

Login and Registration sections are the entry points to your application. These templates are designed to be premium, secure-feeling, and fully responsive, ensuring a great first impression for your users.

Variants

Login V1 (Split Layout)

A premium split-layout sign-up section featuring a marketing side with a 3-step progress indicator and a clean, high-performance form with social integrations.

Login V2 (Glass Minimalist)

A modern, translucent login section with a sleek toggle between Sign In and Registration. Features glassmorphism effects and dynamic background blurs.

Login V3 (Dark Editorial)

A bold, high-contrast design with large typography and an optional QR code login mode. Perfect for tech-focused and creative platforms.

Installation

Automatic (CLI)

# For Login V1
npx shadcn@latest add https://nurav-ui.vercel.app/r/login-v1.json

# For Login V2
npx shadcn@latest add https://nurav-ui.vercel.app/r/login-v2.json

# For Login V3
npx shadcn@latest add https://nurav-ui.vercel.app/r/login-v3.json

Usage

Each login section is designed to be a standalone component. You can import them and use them directly in your Next.js pages or custom authentication routes.

import { LoginV1 } from "@/components/nurav-ui/LoginV1";
import { LoginV2 } from "@/components/nurav-ui/LoginV2";
import { LoginV3 } from "@/components/nurav-ui/LoginV3";

export default function LoginPage() {
  return (
    <main className="min-h-screen flex items-center justify-center p-4">
      {/* Choose your preferred variant */}
      <LoginV1 />
    </main>
  );
}

Modification Guide

These templates are highly customizable to fit your brand and application logic.

1. Form Integration

By default, the forms use basic HTML elements with some state management for password visibility. To make them functional, you can integrate them with libraries like React Hook Form or Zod.

// Example: Adding form logic to LoginV1
const { register, handleSubmit } = useForm();

const onSubmit = (data) => {
  console.log("Form Data:", data);
  // Call your Auth API here (e.g., Auth.js or Better Auth)
};

// ... inside the form tag
<form onSubmit={handleSubmit(onSubmit)}>
  <input {...register("email")} type="email" />
  {/* ... */}
</form>

2. Branding & Assets

• Images: Replace the Unsplash URLs in the img or Image tags with your own brand assets.
• Colors: All variants use Tailwind's color palette (e.g., emerald-500, zinc-900). You can swap these with your brand colors directly in the code.
• Logos: Update the logo sections (marked with Link href="/") to use your application's logo and title.

3. Layout Control

Variants like LoginV2 and LoginV3 accept an imagePosition prop allowing you to swap the side of the marketing content easily:

<LoginV2 imagePosition="right" />

4. Advanced Interactivity

All animations are powered by Motion (Framer Motion). You can adjust the initial, animate, and transition props in the motion components to change the entry effects or hover behaviors.