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
- 🔧 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
<script src="https://pjdeveloper896.github.io/Aakar-ui/dist/Aakar.js"></script><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>| 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! |
<aakar-toast message="Welcome to AakarUI!" duration="3000"></aakar-toast>
<aakar-upload></aakar-upload>
<aakar-rating value="4"></aakar-rating>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👉 Visit: https://pjdeveloper896.github.io/Aakar-ui/
Includes:
- Live preview examples
- Component demos
- Syntax and props
- Fork this repo
- Add your component in
/src - Build and test locally
- Submit a pull request 🙌
Your current GitHub Pages site can be turned into a docs hub:
docs/
├── index.html → Home page + Getting Started
├── components.html → Component previews
├── usage.html → Live examples
├── styles.css → Common CSS
└── script.js → Optional interactivity
<!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>