npm package: @gokulvasanthj/jgv-login-ui
Description: A simple **React Login UI component library** that provides three different login form scenarios along with reusable UI elements.
Latest version: 2.1.1

# @gokulvasanthj/jgv-login-ui

A simple **React Login UI component library** that provides three different login form scenarios along with reusable UI elements.  

✅ Built with TailwindCSS but already bundled.  
✅ No Tailwind installation or setup required.  
✅ Just import the CSS file once and use the components.  

---

## Installation

npm i @gokulvasanthj/jgv-login-ui

To apply styles, you must import:

import '@gokulvasanthj/jgv-login-ui/dist/jgv-login-ui.css';

👉 Without this import, styles will not load.  
👉 No need to install or configure Tailwind in your project. 

emample:

import React from "react";
import "@gokulvasanthj/jgv-login-ui/dist/jgv-login-ui.css";
import { LoginForm1 } from "@gokulvasanthj/jgv-login-ui";
import { LoginForm2 } from "@gokulvasanthj/jgv-login-ui";
import { LoginForm3 } from "@gokulvasanthj/jgv-login-ui";


function Loginpage() {
  return<>
  <LoginForm1 />;
  <LoginForm2 />;
  <LoginForm3 />;
  </>

}

export default Loginpage;


---

## Login Form Styles Customization

You can easily modify and customize the styles of the login forms using props.  
Default values are already applied, but you can override them as needed.  

  //main container
  bgcolor = "bg-gradient-to-b md:bg-gradient-to-l from-teal-600 via-teal-500 to-white",
  height = "min-h-screen",
  width = "w-full",

  //container
  containerbg = "bg-white",
  containerwidth = "w-full max-w-sm sm:max-w-2xl md:max-w-4xl lg:max-w-5xl",
  --->this is given for main container




   title,
   description,
   leftbg = "bg-teal-600",
   leftwidth = "w-full",
   textcolor = "text-white",
  -->this is given for leftside container

---

## How To Implement Your Code

<LoginForm1
  bgcolor = "Your customized color",
  height = "Your customized height",
  width = "Your customized width",
  containerbg = "Your customized text color",
  containerwidth = "Your customized width",
/>

<LoginForm2
  bgcolor = "Your customized color",
  height = "Your customized height",
  width = "Your customized width",
  containerbg = "Your customized text color",
  containerwidth = "Your customized width",
/>

<LoginForm3
  bgcolor = "Your customized color",
  height = "Your customized height",
  width = "Your customized width",
  containerbg = "Your customized text color",
  containerwidth = "Your customized width",
/>

---

## Login Form Scenarios

This package includes **three login forms**:

1. **LoginForm1** → Login using **Email and Password**  
2. **LoginForm2** → Login using **Mobile Number and OTP**  
3. **LoginForm3** → Login using **Social Accounts** (Google, Facebook, Twitter)  

---

## Extra Components

In addition to login forms, these reusable UI elements are available:  

- **Button** → Pre-styled button  
- **Input** → Pre-styled input field  
- **Label** → Pre-styled form label  

---

## Features

- Three ready-to-use login form scenarios  
- Pre-styled UI components (Button, Input, Label)  
- Built with TailwindCSS but styles included in the package  
- Works with React 18+ / 19+  
- Plug and play → no Tailwind setup needed  

---

## Notes

- Always import the CSS file:  

- Works in any React project (Vite, CRA, Next.js, etc).  
- Without the CSS import, the components will render but without styles.  

---