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

npm install @pawan2k02/custom-ui
# or
yarn add @pawan2k02/custom-ui

Peer Dependencies

Ensure these are installed in your project:

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:

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:

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

🔗 Usage

Import components from the library:

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

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

2. Card

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

3. ConfirmModal

<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

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

5. Input

<Input type="text" name="username" placeholder="Enter username" />
<Input type="password" name="password" />

6. Menu

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

7. Modal

<Modal isOpen={isOpen} onClose={() => setOpen(false)} title="My Modal">
  <p>Modal content here</p>
</Modal>

8. NotFound404

<NotFound404 redirectPath="/" backText="Go Home" />

9. ToggleSwitch

<ToggleSwitch value={isOn} onChange={setIsOn} />

10. Notify

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