react-login-kit

A modern, customizable React Login component built with Atomic Design Architecture & SOLID principles, dual themes (Dark + Light), built-in API handling, loading states, and error management. Drop-in ready for any React/Vite project.

✨ Features

• ⚛️ Atomic Design Architecture — Clean separation of concerns into Atoms, Molecules, Organisms, and Templates.
• 🏗️ SOLID Architecture — Strict Single Responsibility, Open/Closed, and Dependency Inversion design.
• 🌓 Dual Themes (Dark & Light) — Vrize Design System tokens with crimson accent (#9e0d32).
• 🎨 Modern UI & Micro-animations — Smooth card slide-up, focus rings, and animated loading spinner.
• 🪝 Headless Hook Export — Exported useLoginForm() hook for building custom UI layouts.
• 🔌 Flexible API Strategy — Use apiUrl for automatic POST requests or onSubmit for custom auth services (Firebase, Supabase, Axios).
• 🎯 100% TypeScript — Full type safety with complete exported type declarations.
• 🧩 Zero CSS Conflicts — Self-contained inline styles & automated keyframe injection.
• 📦 Dual Format Bundle — Ships as both ESM (.mjs) and CJS (.js) modules.

📦 Installation

npm install @prashan0912/react-login-kit

yarn add @prashan0912/react-login-kit

pnpm add @prashan0912/react-login-kit

Note: react and react-dom (v18+) are peer dependencies.

🚀 Quick Start

1. Basic Usage (Dark Theme - Default)

import { Login } from '@prashan0912/react-login-kit';

function App() {
  return (
    <Login
      apiUrl="https://api.example.com/auth/login"
      onSuccess={(data) => {
        console.log('Token:', data.token);
        localStorage.setItem('token', data.token);
      }}
      onError={(err) => {
        console.error('Login failed:', err.message);
      }}
    />
  );
}

2. Light Theme Usage

import { Login } from '@prashan0912/react-login-kit';

function App() {
  return (
    <Login
      theme="light"
      apiUrl="https://api.example.com/auth/login"
      onSuccess={(data) => console.log('Logged in:', data)}
    />
  );
}

3. Custom Submit Handler (Firebase / Supabase / Axios)

import { Login } from '@prashan0912/react-login-kit';

function App() {
  const handleLogin = async (credentials) => {
    // Custom authentication logic
    const response = await myAuthService.login(credentials);
    return response; // Passed to onSuccess
  };

  return (
    <Login
      onSubmit={handleLogin}
      onSuccess={(data) => navigate('/dashboard')}
      title="Sign In to App"
      submitText="Continue"
      showRememberMe
      showForgotPassword
      onForgotPassword={() => navigate('/forgot-password')}
    />
  );
}

⚛️ Atomic Design Architecture & Modular Imports

Developers can import the main top-level <Login /> component or use individual atomic building blocks:

src/components/
├── atoms/       # Button, Input, Label, Checkbox, Alert, Spinner
├── molecules/   # FormField (Label+Input), Header, FooterRow
├── organisms/   # LoginForm
└── templates/   # LoginCard

Importing Individual Atoms, Molecules, or Organisms:

import { 
  // Atoms
  Button, 
  Input, 
  Label, 
  Checkbox, 
  Alert, 
  Spinner,
  // Molecules
  FormField, 
  Header, 
  FooterRow,
  // Organisms
  LoginForm,
  // Templates
  LoginCard
} from '@prashan0912/react-login-kit';

// Example: Using FormField molecule independently in a custom form
function CustomForm() {
  const [email, setEmail] = useState('');

  return (
    <FormField
      id="custom-email"
      label="Email Address"
      value={email}
      onChange={(e) => setEmail(e.target.value)}
      placeholder="[email protected]"
    />
  );
}

4. Advanced: Headless Custom UI with useLoginForm Hook

For complete control over your JSX presentation while retaining form state, validation, and submission logic:

import { useLoginForm } from '@prashan0912/react-login-kit';

function CustomLoginForm() {
  const {
    username,
    setUsername,
    password,
    setPassword,
    isLoading,
    error,
    handleSubmit,
  } = useLoginForm({
    apiUrl: '/api/login',
    onSuccess: (data) => console.log('Logged in:', data),
  });

  return (
    <form onSubmit={handleSubmit}>
      {error && <div className="error">{error}</div>}
      <input value={username} onChange={(e) => setUsername(e.target.value)} placeholder="Username" />
      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" />
      <button type="submit" disabled={isLoading}>
        {isLoading ? 'Signing in...' : 'Login'}
      </button>
    </form>
  );
}

📋 Props API (<Login />)

| Prop | Type | Default | Description | |------|------|---------|-------------| | theme | 'dark' \| 'light' | 'dark' | Visual theme mode (Dark or Light) | | apiUrl | string | — | Backend URL for POST login request | | onSubmit | (creds) => Promise<any> | — | Custom submit handler (overrides apiUrl) | | onSuccess | (response) => void | — | Called on successful login with response data | | onError | (error) => void | — | Called on failed login with the error | | customStyles | Partial<LoginStyles> | {} | Override inline styles for specific parts | | title | string | "Welcome Back" | Heading text | | subtitle | string | "Sign in to your account..." | Text below the heading | | submitText | string | "Sign In" | Submit button text | | usernameLabel | string | "Email or Username" | Username field label | | usernamePlaceholder | string | "Enter your email..." | Username field placeholder | | passwordLabel | string | "Password" | Password field label | | passwordPlaceholder | string | "Enter your password" | Password field placeholder | | showRememberMe | boolean | false | Show "Remember Me" checkbox | | showForgotPassword | boolean | false | Show "Forgot Password?" link | | onForgotPassword | () => void | — | Callback when "Forgot Password?" is clicked | | className | string | — | Additional CSS class on root container | | apiHeaders | Record<string, string> | — | Extra HTTP headers for apiUrl requests |

🏗️ Exported Modules (Atomic & SOLID API)

// Components & Hooks
import { Login, LoginCard, LoginForm, useLoginForm } from '@prashan0912/react-login-kit';

// Atomic Elements
import { Button, Input, Label, Checkbox, Alert, Spinner, FormField, Header, FooterRow } from '@prashan0912/react-login-kit';

// Standalone Services & Theme Engine
import { defaultApiSubmit, darkTheme, lightTheme, brand, buildStyles } from '@prashan0912/react-login-kit';

// TypeScript Types
import type { LoginProps, LoginCredentials, LoginStyles, ThemeColors, UseLoginFormOptions } from '@prashan0912/react-login-kit';

🛠️ Build & Publish Guide

# 1. Install dependencies
npm install

# 2. Build dist files
npm run build

# 3. Publish to NPM
npm publish --access public

📄 License

MIT © Prashant Sahu