Aakar-ui

🌟 AakarUI – Modern Web Components Library

AakarUI is a beautiful, lightweight, and modular UI component library built entirely using native Web Components. No framework needed — just plug and play using a CDN!

🚀 Live CDN: https://pjdeveloper896.github.io/Aakar-ui/dist/Aakar.js

✨ Features

🔧 No dependencies — 100% native JS
💅 Pre-styled with elegant animations
📦 All-in-one CDN bundle
💡 Easy to use in any project (HTML, JS, or frameworks)
📱 Fully responsive & accessible

🔗 Getting Started

1. 📥 Include via CDN

<script src="https://pjdeveloper896.github.io/Aakar-ui/dist/Aakar.js"></script>

2. 🧪 Use Components

<aakar-btn>Click Me</aakar-btn>

<aakar-input>Username</aakar-input>

<aakar-alert type="success">Profile updated!</aakar-alert>

<aakar-navbar brand="AakarUI">
  <a href="#">Home</a>
  <a href="#">Docs</a>
  <a href="#">Login</a>
</aakar-navbar>

📚 Available Components

Component	Description
`<aakar-btn>`	Stylish button
`<aakar-input>`	Floating label input
`<aakar-card>`	Container with elevation
`<aakar-alert>`	Alert box (success, error, etc.)
`<aakar-navbar>`	Responsive top nav
`<aakar-dropdown>`	Click-to-toggle dropdown menu
`<aakar-modal>`	Dialog modal
`<aakar-tabs>`	Tabbed interface
`<aakar-tooltip>`	Hover tooltip
`<aakar-toast>`	Auto-dismiss toast message
`<aakar-accordion>`	Expand/collapse panel
`<aakar-avatar>`	Circular profile picture
`<aakar-chatbox>`	Basic chat interface
`<aakar-calendar>`	Monthly calendar
`<aakar-table>`	Responsive styled table
`<aakar-upload>`	File uploader
`<aakar-pill>`	Rounded pill-style tag
`<aakar-stepper>`	Step tracker
`<aakar-rating>`	Star rating selector
`<aakar-slider>`	Range slider
…more coming soon!

🧩 Example

<aakar-toast message="Welcome to AakarUI!" duration="3000"></aakar-toast>

<aakar-upload></aakar-upload>

<aakar-rating value="4"></aakar-rating>

📁 Local Development

Clone the repo and serve locally:

git clone https://github.com/pjdeveloper896/Aakar-ui.git
cd Aakar-ui
npm install
npm run dev  # or use live-server / http-server

🌐 Documentation Site

👉 Visit: https://pjdeveloper896.github.io/Aakar-ui/

Includes:

Live preview examples
Component demos
Syntax and props

🤝 Contributing

Fork this repo
Add your component in /src
Build and test locally
Submit a pull request 🙌

📘 Documentation Site Suggestions

Your current GitHub Pages site can be turned into a docs hub:

✅ Structure Example

docs/
├── index.html       → Home page + Getting Started
├── components.html  → Component previews
├── usage.html       → Live examples
├── styles.css       → Common CSS
└── script.js        → Optional interactivity

✅ Starter `index.html`

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AakarUI Docs</title>
  <script src="https://pjdeveloper896.github.io/Aakar-ui/dist/Aakar.js"></script>
  <style>
    body { font-family: sans-serif; padding: 2rem; background: #f5f5f5; }
    h1 { color: #ff416c; }
    demo-block { margin-bottom: 2rem; display: block; }
  </style>
</head>
<body>
  <h1>📘 AakarUI Documentation</h1>

  <demo-block>
    <h3>Button</h3>
    <aakar-btn>Click Me</aakar-btn>
  </demo-block>

  <demo-block>
    <h3>Input</h3>
    <aakar-input>Enter Name</aakar-input>
  </demo-block>

  <demo-block>
    <h3>Calendar</h3>
    <aakar-calendar></aakar-calendar>
  </demo-block>
</body>
</html>