Modern Admin Dashboard Template
A beautifully designed, production-ready admin dashboard built with Tailwind CSS v4 and Vite.
Version 2.0 is a complete rewrite from the ground up. The entire codebase has been rebuilt with a modern architecture, improved developer experience, and better performance.
What's New:
- Rebuilt with Tailwind CSS v4 and Vite
- 4 unique dashboard templates
- 10 accent colors + Light/Dark themes
- SPA-like navigation without page reloads
- Widget-based component architecture
- Redesigned landing page
Documentation:
- ARCHITECTURE.md - Project structure and architecture rules
- COMPONENT_GUIDE.md - How to create and use components
| Analytics | E-commerce |
|---|---|
|
 |
| Crypto | Mission Control |
|---|---|
 |
 |
- 4 Dashboard Templates - Analytics, E-commerce, Crypto, Mission Control
- 2 Themes - Light & Dark mode
- 47+ Pages - Authentication, Apps, Components, Forms, and more
- 15+ Components - Buttons, Cards, Tables, Charts, Modals, etc.
- SPA Navigation - Smooth transitions without page reloads
- Responsive Design - Works on all devices
- Modern Stack - Vite, Tailwind CSS v4, Handlebars
Cleopatra is built with vanilla JavaScript intentionally:
- Zero Framework Lock-in - Use it with any backend (Laravel, Django, Rails, Node, or static)
- Faster Load Times - No framework runtime overhead
- Easy to Understand - Simple, readable code without framework abstractions
- Future Proof - Vanilla JS never goes out of style
- Lightweight - Smaller bundle size means faster page loads
- Full Control - No hidden magic, you own every line of code
This makes Cleopatra perfect for developers who want a clean starting point without the complexity of React, Vue, or Angular.
# Clone the repository
git clone https://github.com/moesaid/cleopatra.git
# Navigate to directory
cd cleopatra
# Install dependencies
npm install
# Start development server
npm run devsrc/
├── components/
│ ├── layout/ # App shell, header, sidebar
│ ├── ui/ # Buttons, cards, alerts, modals
│ ├── widgets/ # Dashboard widgets, charts, stats
│ └── charts/ # ApexCharts & Chart.js components
├── pages/ # Route files
├── styles/ # Global styles & Tailwind config
└── js/ # JavaScript modules
Choose from 10 accent colors:
| Black (default) | Blue | Green | Orange | Yellow |
| Olive | Slate | Cyan | Purple | Rose |
- Light Mode - Clean white interface
- Dark Mode - Easy on the eyes
| Tool | Purpose |
|---|---|
| Vite | Build tool & dev server |
| Tailwind CSS v4 | Utility-first styling |
| Handlebars | Template partials |
| ApexCharts | Interactive charts |
| Chart.js | Additional chart types |
MIT © Mohamed Said
