- 39 pre-built pages — dashboards, apps, auth, ecommerce, users & more
- Dark / Light mode — persistent theme with zero flash on load
- Responsive — mobile-first, works on all screen sizes
- Pug templates — clean, reusable layouts with includes & mixins
- SCSS architecture — modular partials with CSS custom properties
- Gulp build pipeline — compile, watch, live-reload in one command
- Bootstrap 5.3 — extended with custom design tokens
- MIT licensed — free for personal and commercial use
| Layer | Technology |
|---|---|
| CSS Framework | Bootstrap 5.3 |
| Template Engine | Pug 3 |
| Stylesheet | SCSS (Dart Sass) |
| Build Tool | Gulp 4 |
| Icons | Bootstrap Icons 1.11 |
| Fonts | Plus Jakarta Sans |
| Charts | ApexCharts / Chart.js |
| Maps | Leaflet.js |
Dashboards (2)
| Page | Description |
|---|---|
index.html |
Analytics Dashboard — KPIs, charts, orders, activity feed |
pages/dashboards/dashboard-ecommerce.html |
eCommerce Dashboard — revenue, sales, top categories |
Applications (8)
| Page | Description |
|---|---|
| Email Inbox | Full inbox with compose, read, reply |
| Chat | Real-time chat UI with contacts & messages |
| Calendar | FullCalendar integration with add event modal |
| Kanban | Drag-and-drop task board with 4 columns |
| Invoice | Professional invoice with print/PDF |
| Apex Charts | 12 chart types using ApexCharts |
| Chart.js | 8 chart types using Chart.js |
| Leaflet Maps | 5 interactive map examples |
User Management (6)
| Page | Description |
|---|---|
| Users List | Searchable, filterable user table |
| Add User | Create user form with avatar upload |
| Edit User | Pre-filled edit form with password change |
| Profile | Public profile with skills & activity |
| Account Settings | Profile, security, notifications, billing tabs |
| Notifications | Grouped notification feed |
E-Commerce (2)
| Page | Description |
|---|---|
| Products | Product grid with filters & status badges |
| Orders | Order list with summary cards & table |
UI Components (5)
| Page | Description |
|---|---|
| Buttons | Variants, sizes, states, icon buttons, groups |
| Cards | Basic, stats, colored, list group cards |
| Forms | Inputs, checkboxes, switches, validation |
| Modals | 8 modal variants (success, danger, form, etc.) |
| Tables | Bulk-action table, striped product table |
Authentication (6)
| Page | Description |
|---|---|
| Login | Email/password + social login |
| Register | Registration form with terms |
| Forgot Password | Recovery email form |
| Reset Password | New password form |
| Verify Email | OTP verification |
| Lock Screen | Session lock with password unlock |
Misc Pages (6)
| Page | Description |
|---|---|
| 404 | Page not found |
| 500 | Server error |
| Coming Soon | Countdown timer with email subscribe |
| Maintenance | Under maintenance screen |
| FAQ | Accordion FAQ |
| Pricing | 3-tier pricing table with feature list |
- Node.js v18 or higher
- npm v9 or higher
# 1. Clone the repository
git clone https://github.com/spykapp/adminpro.git
cd adminpro
# 2. Install dependencies
npm install
# 3. Start the development server
npm run devYour browser will open automatically at http://localhost:3000.
| Command | Description |
|---|---|
npm run dev |
Start dev server with BrowserSync + live reload |
npm run build |
Production build (minified CSS) → dist/ |
npm run watch |
Watch files without opening a browser |
npm run clean |
Delete dist/ folder |
adminpro/
├── src/
│ ├── pug/
│ │ ├── _layouts/ # Page layout templates
│ │ │ ├── base.pug # Dashboard layout (sidebar + topbar)
│ │ │ ├── auth.pug # Auth split-panel layout
│ │ │ └── minimal.pug # Minimal layout (error pages)
│ │ ├── _includes/ # Shared partial templates
│ │ │ ├── _head.pug # <head> with CDN links
│ │ │ ├── _sidebar.pug # Navigation sidebar
│ │ │ ├── _topbar.pug # Top navigation bar
│ │ │ ├── _footer.pug # Page footer
│ │ │ └── _scripts.pug # JS includes
│ │ ├── index.pug # Home dashboard
│ │ └── pages/
│ │ ├── apps/ # Application pages
│ │ ├── auth/ # Authentication pages
│ │ ├── components/ # UI component demos
│ │ ├── dashboards/ # Additional dashboards
│ │ ├── ecommerce/ # E-commerce pages
│ │ ├── misc/ # Misc pages (404, pricing…)
│ │ └── users/ # User management pages
│ ├── scss/
│ │ ├── _variables.scss # Design tokens & SCSS vars
│ │ ├── _base.scss # CSS custom properties + reset
│ │ ├── _layout.scss # App shell layout
│ │ ├── _sidebar.scss # Sidebar styles
│ │ ├── _topbar.scss # Top bar styles
│ │ ├── _cards.scss # Card components
│ │ ├── _tables.scss # Table styles
│ │ ├── _forms.scss # Form elements
│ │ ├── _buttons.scss # Buttons
│ │ ├── _components.scss # Badges, modals, pagination…
│ │ ├── _auth.scss # Auth page styles
│ │ ├── _apps.scss # Chat, email, calendar, kanban
│ │ ├── _misc.scss # Error pages, coming soon
│ │ ├── _utilities.scss # Helpers & print styles
│ │ └── main.scss # Entry point — imports all partials
│ └── js/
│ └── app.js # Theme, sidebar, toasts, modals…
├── dist/ # Compiled output (git-ignored)
├── gulpfile.js # Build tasks
├── package.json
└── README.md
Open src/scss/_variables.scss and edit the primary palette:
$primary: #3b82f6; // ← your brand color
$primary-hover: #2563eb;
$primary-light: rgba(59, 130, 246, 0.10);Then rebuild:
npm run build- Create
src/pug/pages/my-section/my-page.pug - Extend the appropriate layout:
extends ../../_layouts/base
block vars
- var pageTitle = 'My Page'
- var root = '../../'
block content
h1.page-title My Page
p.text-muted Custom content goes here.- The Gulp watch task will compile it automatically.
Edit src/pug/_includes/_sidebar.pug and add a li.menu-item in the relevant section.
AdminPro ships with a full dark/light theme system:
- Auto-detection — respects
prefers-color-schemeon first visit - Persistent — saved in
localStoragekeyadminpro-theme - Flash-free — a tiny inline script applies the theme before CSS loads
- Toggle — click the moon/sun icon in the topbar
Contributions are what make open source amazing! Here's how to contribute:
- Fork the repository
- Create a feature branch:
git checkout -b feature/my-feature - Commit your changes:
git commit -m 'Add my feature' - Push:
git push origin feature/my-feature - Open a Pull Request
Please read our Contributing Guide before submitting a PR.
Found a bug? Open an issue with:
- Steps to reproduce
- Expected vs actual behavior
- Browser & OS info
Distributed under the MIT License. See LICENSE for details.
You are free to use AdminPro in personal and commercial projects. Attribution is appreciated but not required.
Made with ❤️ by SpykApps
⭐ Star this repo if AdminPro helped you!