Akomponent 🚀 - Modern UI Components Library

Akomponent is a lightweight, customizable UI component library built for modern web applications. Designed for speed, simplicity, and flexibility, it provides ready-to-use components to accelerate your development workflow. 💡

🌟 Features

✅ Prebuilt, Reusable UI Components 🎨
✅ Fully Customizable & Responsive 📱
✅ Optimized for Performance & Accessibility ⚡
✅ Works Seamlessly with React & Tailwind CSS 🔥
✅ Minimal Dependencies for Faster Load Times 🏎️

---

📦 Installation

Install via npm

npm install akomponents-lib

Install via akmanager

ak i akomponents-lib

---

🚀 Usage

Import and use components in your project easily:

import { Button } from "akomponent";

export default function App() {
  return <Button variant="primary">Click Me</Button>;
}

✔ Supports props for customization!

<Button variant="secondary" size="lg" onClick={() => alert("Hello!")}>
  Custom Button
</Button>

---

📂 Available Components

✅ Buttons - Primary, Secondary, Outline, Icon Buttons
✅ Cards - Customizable layout with images & text
✅ Modals - Smooth, accessible popups
✅ Forms - Inputs, Checkboxes, and Toggles
✅ Alerts - Success, Warning, Error messages
✅ Navbars - Responsive and interactive navigation bars

📌 More components coming soon! 🚀

---

🎨 Theming & Customization

Akomponent is fully customizable with Tailwind CSS and supports theme overrides.

<Button className="bg-blue-500 hover:bg-blue-600 text-white">Custom Styled Button</Button>

Want to modify defaults? Extend Tailwind’s config!

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: "#4A90E2",
      },
    },
  },
};

---

📖 Documentation & Live Demo

Check out the full documentation and live demo here.

---

🛠️ How to Use

Basic Example

Use components in your project:

import { Card } from "akomponent";

export default function Example() {
  return (
    <Card>
      <h2 className="text-xl font-bold">Welcome to Akomponent</h2>
      <p>This is a simple card component.</p>
    </Card>
  );
}

Using Multiple Components

import { Button, Alert, Modal } from "akomponent";

export default function Example() {
  return (
    <div>
      <Alert type="success">This is a success message!</Alert>
      <Button onClick={() => console.log("Button Clicked")}>Click Me</Button>
      <Modal isOpen={true} title="Example Modal">
        <p>Modal Content Goes Here</p>
      </Modal>
    </div>
  );
}

---

🛠️ Contributing

We welcome contributions! To set up locally:

git clone https://github.com/yourusername/akomponent.git
cd akomponent
npm install
npm run dev

🚀 Submit pull requests and help improve Akomponent!

---

📜 License

Akomponent is licensed under the MIT License – free for personal and commercial use.
⭐ Star this repo if you find it useful! 🚀