0.0.9 • Published 7 months ago
awal-ui v0.0.9
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!