🎯 React Modern Login

A modern, animated login component built with React, TypeScript, and Tailwind CSS.

![React Modern Login Preview]

✨ Features

• 🎨 Beautiful glassmorphism design
• 🌈 Customizable themes and colors
• 🔒 Built-in authentication context
• 📱 Fully responsive design
• 🎯 Form validation with React Hook Form
• 👁️ Password visibility toggle
• ⚡ Loading states and error handling
• 🚀 TypeScript support
• 🎭 Error messages and validation
• 🔄 Remember me functionality

🚀 Installation

# Using npm
npm install react-modern-login

# Using yarn
yarn add react-modern-login

💻 Usage

import { LoginForm, AuthProvider } from 'react-modern-login';

function App() {
  return (
    <AuthProvider>
      <LoginForm 
        onSuccess={(user) => console.log('Logged in:', user)}
        theme={{
          primaryColor: 'blue',
          gradientFrom: 'blue-500',
          gradientTo: 'indigo-500'
        }}
      />
    </AuthProvider>
  );
}

🛠️ Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | theme | object | {} | Custom theme options | | onSuccess | function | - | Success callback | | onError | function | - | Error callback | | customValidation | object | - | Custom validation rules |

🎨 Customization

Theme Options

<LoginForm 
  theme={{
    primaryColor: 'blue',
    gradientFrom: 'blue-500',
    gradientTo: 'indigo-500',
    buttonColor: 'blue-600'
  }}
/>

Custom Validation

<LoginForm 
  customValidation={{
    email: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
    passwordMinLength: 6
  }}
/>

🔒 Authentication

import { useAuth } from 'react-modern-login';

function MyComponent() {
  const { user, login, logout, isLoading } = useAuth();
  // Use auth functions
}

🎨 Default Theme

{
  primaryColor: 'violet',
  gradientFrom: 'violet-500',
  gradientTo: 'fuchsia-500',
  buttonColor: 'violet-600'
}

📱 Responsive Design

• Mobile-friendly interface
• Adapts to all screen sizes
• Smooth animations
• Touch-friendly inputs

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

🐛 Bug Reports

Found a bug? Please create an issue with:

1. Bug description
2. Steps to reproduce
3. Expected vs actual behavior
4. Browser and OS details

📞 Support

• GitHub Issues: Create an issue
• Email: [email protected]
• LinkedIn: @sankarkumarkathirvel

📝 License

MIT © [Sankarkumar Kathirvel]

🙏 Credits

• React Hook Form for form handling
• Tailwind CSS for styling
• Lucide Icons for beautiful icons

Made with ❤️ by Sankarkumar Kathirvel