Awal UI Library

Awal UI is a modern React component library built with TailwindCSS and Framer Motion to help developers create beautiful, interactive user interfaces quickly and efficiently.

🚀 Features

• Lightweight, customizable, and accessible components.
• Smooth animations with Framer Motion.
• Fully styled using TailwindCSS for rapid development.
• TypeScript support for a better developer experience.

📦 Installation

Install the library and its peer dependencies:

npm install awal-ui tailwindcss framer-motion

🛠 Usage

Here's a quick example of how to use a button from Awal UI:

import React from 'react';
import { Button } from 'awal-ui';

const App = () => (
  <div className="p-4">
    <Button variant="primary" onClick={() => alert('Button clicked!')}>
      Click Me
    </Button>
  </div>
);

export default App;

🎨 Customization

1. Theming

To customize the theme, extend the TailwindCSS configuration in your tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#1a73e8',
        secondary: '#fbbc05',
      },
    },
  },
}

2. Animations

All animations are powered by Framer Motion. You can override animation settings via component props.

🧩 Components

| Component | Description | | --------------------- | -------------------------------- | | Button | Customizable button components. | | Input | Form input elements. | | Loader | Loading spinners and indicators. | | CopyToClipboard | Copy content to the clipboard. | | Overlay | Copy content to the clipboard. | | Image | Copy content to the clipboard. | | Ripple | Copy content to the clipboard. | | ScrollRestoration | Copy content to the clipboard. | | ThemeProvider | Copy content to the clipboard. |

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page (update link).

📄 License

This project is licensed under the MIT License.

Happy coding! 🚀

Let me know if you’d like help with setting up documentation further or refining your code!