npm package: @pawan2k02/custom-ui
Description: A modern React UI component library built with **TailwindCSS**, **Framer Motion**, and **Lucide Icons**. Includes animated, accessible components for rapid UI development.
Latest version: 1.0.5

# CustomUI Component Library

A modern React UI component library built with **TailwindCSS**, **Framer Motion**, and **Lucide Icons**. Includes animated, accessible components for rapid UI development.

## ✨ Features
- Beautiful, responsive components
- Smooth animations with Framer Motion
- TailwindCSS utility classes for styling
- Modular architecture with barrel exports
- ES and UMD builds for flexibility

## 📦 Installation
```bash
npm install @pawan2k02/custom-ui
# or
yarn add @pawan2k02/custom-ui
```

### Peer Dependencies
Ensure these are installed in your project:
```bash
npm install react react-dom framer-motion lucide-react react-hot-toast react-router-dom
```

## ⚡ TailwindCSS Setup
Your app must have Tailwind configured. Add this to your `tailwind.config.js`:
```js
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/@pawan2k02/custom-ui/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
```
Include Tailwind directives in your CSS:
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

## 🔗 Usage
Import components from the library:
```jsx
import { Button, Card, ConfirmModal, Form, Input, Menu, Modal, NotFound404, ToggleSwitch, Notify } from '@pawan2k02/custom-ui';

function App() {
  return (
    <div className="p-6">
      <Button variant="primary">Click Me</Button>
    </div>
  );
}
```

### ✅ Components Overview

#### 1. Button
```jsx
<Button variant="primary" onClick={() => alert('Clicked!')}>Primary Button</Button>
<Button variant="danger">Delete</Button>
```

#### 2. Card
```jsx
<Card header={<h3>Title</h3>} footer={<span>Footer</span>}>
  Card content goes here.
</Card>
```

#### 3. ConfirmModal
```jsx
<ConfirmModal
  isOpen={isOpen}
  onClose={() => setOpen(false)}
  onConfirm={handleDelete}
  title="Are you sure?"
  description="This action cannot be undone."
  confirmText="Delete"
  cancelText="Cancel"
  variant="danger"
/>
```

#### 4. Form
```jsx
<Form
  fields={[{ name: 'email', type: 'email', label: 'Email' }]}
  onSubmit={handleSubmit}
  errors={{ email: 'Email is required' }}
  submitText="Submit"
/>
```

#### 5. Input
```jsx
<Input type="text" name="username" placeholder="Enter username" />
<Input type="password" name="password" />
```

#### 6. Menu
```jsx
<Menu name="Dashboard" icon={Home} isActive={true} onClick={() => navigate('/dashboard')} />
```

#### 7. Modal
```jsx
<Modal isOpen={isOpen} onClose={() => setOpen(false)} title="My Modal">
  <p>Modal content here</p>
</Modal>
```

#### 8. NotFound404
```jsx
<NotFound404 redirectPath="/" backText="Go Home" />
```

#### 9. ToggleSwitch
```jsx
<ToggleSwitch value={isOn} onChange={setIsOn} />
```

#### 10. Notify
```jsx
Notify.success('Action completed!');
Notify.error('Something went wrong');
```

## 🛠 Build Formats
- **ES Module**: `dist/index.es.js`
- **UMD**: `dist/index.umd.js`

## ⚠️ Notes
- TailwindCSS must be configured in the consuming app.
- All animations respect Framer Motion; ensure peer dependencies are installed.

## 📄 License
MIT