user-auth-ui-library v0.1.5

Certainly! Below is the README.md content formatted in Markdown:

# User Auth UI Library

A reusable UI library for user authentication built with React and Tailwind CSS.

## Installation

To install the library, run:

```bash
npm install user-auth-ui-library

Components

1. ThemeSwitch

A component for toggling between themes.

Props

Example

import { ThemeSwitch } from "user-auth-ui-library";

function App() {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeSwitch 
      currentTheme={theme} 
      onThemeChange={setTheme} 
    />
  );
}

2. LoginForm

A form component for user login.

Props

Example

import { LoginForm } from "user-auth-ui-library";

function App() {
  const handleLoginSuccess = (token) => {
    console.log('Login successful. Token:', token);
  };

  return (
    <LoginForm
      onLoginSuccess={handleLoginSuccess}
      accent="purple"
      size="mid"
    />
  );
}

3. RegisterForm

A form component for user registration.

Props

Example

import { RegisterForm } from "user-auth-ui-library";

function App() {
  const handleRegisterSuccess = () => {
    console.log('Registration successful');
  };

  return (
    <RegisterForm
      onRegisterSuccess={handleRegisterSuccess}
      accent="zinc"
      size="mid"
    />
  );
}

4. ResetPasswordForm

A form component for resetting a user's password.

Props

Example

import { ResetPasswordForm } from "user-auth-ui-library";

function App() {
  return (
    <ResetPasswordForm
      accent="purple"
      size="mid"
    />
  );
}

5. ResetRequestForm

A form component for requesting a password reset.

Props

Example

import { ResetRequestForm } from "user-auth-ui-library";

function App() {
  return (
    <ResetRequestForm
      accent="zinc"
      size="mid"
    />
  );
}

6. LogoutButton

A button component for logging out the user.

Props

Example

import { LogoutButton } from "user-auth-ui-library";

function App() {
  const handleLogout = () => {
    console.log('User logged out');
  };

  return (
    <LogoutButton
      onLogout={handleLogout}
      accent="red"
      size="mid"
    />
  );
}

Tailwind CSS Integration

This library is built with Tailwind CSS. Ensure that you have Tailwind CSS set up in your project. You can follow the Tailwind CSS installation guide to get started.

Example Tailwind Setup

1. Install Tailwind CSS:

   npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init -p

2. Configure tailwind.config.js:

   module.exports = {
     content: [
       "./src/**/*.{js,jsx,ts,tsx}",
       "./node_modules/user-auth-ui-library/**/*.{js,jsx,ts,tsx}"
     ],
     theme: {
       extend: {},
     },
     plugins: [],
   };

3. Add Tailwind directives to your CSS:

   @tailwind base;
   @tailwind components;
   @tailwind utilities;

Contributing

Contributions are welcome! Please feel free to submit a pull request or open an issue.