Adminox Documentation
Adminox Bootstrap Admin Dashboard Template is a responsive admin panel dashboard built using HTML, Bootstrap, SCSS and jQuery. It comes with 6 separate dashboard themes: horizontal, scrollable and vertical layouts, plus dark, small and light sidebars.
This guide explains how to install, run and build the template, how the project is organised, how to change colours and themes, and how to add pages. Read it before you start customizing; it will save you time.
What is Adminox?
Adminox is an admin dashboard template for developers who want a head start on a back-office interface. It provides login pages, charts UI, data tables, forms and advanced UI like Dragula and nestable, plus application UIs such as calendar, chat, email and project management, all as plain HTML pages on top of Bootstrap 5.3 and SCSS.
The code is clear, well documented and organized, which makes customization and setup simple. The template is completely responsive and works across all modern browsers and mobile devices. Your purchase includes detailed documentation (this page), one year of dedicated support and free lifetime updates.
An Angular version is also available: Adminox Angular Admin Dashboard Template.
src/.Key Features
Everything included in Adminox at a glance.
In numbers: 50+ page templates (58 in this package), 150+ usable components, a dark and light skin, and vertical and horizontal layouts. Supportive pages, detailed documentation, free lifetime updates and one year of dedicated support are included.
Built for Every Kind of Admin Dashboard
eCommerce admin panels, custom Bootstrap admin themes, CRM admin dashboards, analytics dashboard panels, simple and flat admin dashboards, project and management admin panels, accounting software, CMS, ERP and SaaS admin dashboards.
eCommerce & Custom Admin Panels
Orders, products and customers on a layout that already handles sidebar, topbar and theming.
Analytics & Dashboards
Widgets and three chart libraries for analytics, flat admin and Bootstrap dashboard panels.
CRM & Project Management
Calendar, Kanban board, task lists, chat and email give you a working base for a CRM or project admin.
Accounting, CMS & ERP
Data tables, invoices, forms and validation for accounting software, CMS and ERP back offices.
Built With
The core stack is Bootstrap 5.3.8, Sass and jQuery, compiled with Gulp. Everything else (charts, calendar, editors, pickers) is listed under Dependencies.
Browser Support
Adminox works across all modern browsers and mobile devices. Bootstrap 5.3's responsive grid keeps the interface usable from small phones to large monitors.
Getting Started
You can use the compiled dist/ folder as it is. To change the source you need Node.js; there is no backend or database to install.
Open the project folder
Unzip the package and move into the adminator-html folder.
cd adminator-html
Install dependencies
Installs every library and Gulp plugin listed in package.json. Node.js 18 or newer is recommended.
npm i
Install the Gulp CLI (once)
Needed only if the gulp command is not found on your machine. Alternatively prefix the commands below with npx.
npm i -g gulp-cli
Build the project
Copies the libraries, compiles SCSS, builds the HTML, optimizes images and fonts and bundles the JavaScript into dist/. The output is plain static files, ready to upload to any web host.
gulp build
Watch for changes
Opens dist/index.html with live reload (BrowserSync). Edit files in src/ and the browser refreshes. Run it after gulp build.
gulp watch
Other commands (optional)
npm start runs the full build and then the watcher in one go, npm run build is the same as gulp build, and npm run libs only refreshes the vendor libraries in src/assets/libs/.
npm start
# Same as gulp build
npm run build
# Only the library copy step
npm run libs
Folder Structure
Edit src/; Gulp writes the finished site to dist/. Pages are assembled from small HTML partials with @@include.
├── src/ # Everything you edit
│ ├── *.html # One file per page (58): index, layouts-*, forms-*, tables-* …
│ ├── partials/ # head, topbar, menu, horizontal-nav, left-sidebar, right-sidebar, footer
│ ├── templates/ # dashboard.html page shell shared by the layout pages
│ ├── app-settings.json # Name, URLs and theme colour injected into every page
│ └── assets/
│ ├── scss/ # app, bootstrap, icons, theme-dark + custom/ (structure, components, pages, plugins)
│ ├── js/ # app.js, layout.js, colors.js + pages/*.init.js (one per page)
│ ├── libs/ # Vendor files copied from node_modules by npm run libs
│ ├── images/ fonts/
│ └── libs-old/ # Original vendored libraries, kept for reference
├── dist/ # Generated output. Upload this folder. Do not edit.
│ └── assets/css/ # bootstrap, app, icons, theme-dark (+ -rtl, + .min)
├── gulpfile.js # libs, assets, html, imageMin, fonts, css, javascript, watch
└── package.json # Scripts and dependencies
dist/. It is deleted and regenerated by the build, so changes made there are lost.Colors & SCSS Variables
Theme colours are Sass variables in src/assets/scss/_variables.scss. Change a value there, rebuild, and every button, badge, alert and chart follows.
Editing a colour
$blue: #5369f8;
$primary: $blue;
$success: $green;
Other SCSS files: _bootstrap-overrides.scss holds Bootstrap tweaks, theme-dark.scss holds the dark colour tokens, custom/ holds the structure, component, page and plugin styles, and app.scss, bootstrap.scss, icons.scss are the compiled entry points.
Dark Mode, RTL & Sidebar Themes
Switch between dark and light skin, vertical and horizontal layout, sidebar styles and right-to-left text.
Dark mode. Colours are CSS custom properties. The top bar toggle sets data-bs-theme="dark" on <html> and remembers the choice in localStorage under adminator-theme. The dark values live in src/assets/scss/theme-dark.scss.
Layouts. Each layouts-*.html page sets data-layout-id on <body>; layout.js remembers the pick (adminator-layout) and applies it on every other page. Open any page with ?layout=default to go back to the default.
Dark Sidebar
left-side-menu-dark
Small Sidebar
left-side-menu-condensed
Scrollable
scrollable-layout
Boxed
boxed-layout
RTL. Gulp mirrors the stylesheets with RTLCSS into bootstrap-rtl.min.css and app-rtl.min.css. layouts-rtl.html loads them and sets dir="rtl", which suits Arabic, Hebrew and Persian interfaces.
Layout & Sidebar Menu
A top bar, a left sidebar (or horizontal navigation), a right-side panel and a content area. The page shell is src/templates/dashboard.html; each page includes it and adds its own content.
Adding a menu item
Add one list item to src/partials/menu.html for the vertical sidebar, and the matching entry to src/partials/horizontal-nav.html for the horizontal layout.
<a href="reports.html">
<i data-feather="bar-chart-2"></i>
<span> Reports </span>
</a>
</li>
Adding a page
Copy src/pages-starter.html, give it a new name and title, and run the build. Page-specific JavaScript goes in src/assets/js/pages/<name>.init.js.
Pages
58 ready pages in this package, running as real HTML, not mockups. See them on the preview page.
Dashboard
Apps
Pages & Auth
Layouts
UI Components
Advanced UI
Forms
Charts, Tables & Icons
UI Components
A complete Bootstrap 5.3 component set plus advanced widgets for real admin workflows.
Dependencies
The packages Adminox is built on, taken from this project's package.json. Vendor files are copied to src/assets/libs/ by npm run libs.
Core
| Package | Used for |
|---|---|
| bootstrap 5.3.8 | Bootstrap 5.3.8, the CSS and JS framework |
| jquery 4.0.0 | jQuery 4.0.0 |
| jquery-slimscroll 1.3.8 | Scrollable sidebar |
| metismenujs 1.4.0 | Collapsible sidebar menu |
| moment 2.30.1 | Date handling for calendar and widgets |
Icons
| Package | Used for |
|---|---|
| feather-icons 4.29.2 | Main icon set |
| @mdi/font 7.4.47 | Material Design Icons |
| bootstrap-icons 1.13.1 | Bootstrap Icons |
Charts & calendar
| Package | Used for |
|---|---|
| apexcharts 5.10.3 | ApexCharts |
| chart.js 4.5.1 | Chart.js |
| morris.js, raphael | Morris charts |
| fullcalendar, @fullcalendar/bootstrap5 | Calendar app with add, edit and remove events |
Forms & inputs
| Package | Used for |
|---|---|
| flatpickr 4.6.13 | Date and time picker |
| select2, select2-bootstrap-5-theme | Searchable select |
| @melloware/coloris 0.25.1 | Colour picker |
| imask 7.6.1 | Input masks |
| bootstrap-touchspin 4.7.3 | Numeric spinner |
| jquery-validation, parsleyjs | Form validation |
| smartwizard 4.3.1 | Multi-step form wizard |
| dropzone 5.9.3 | Drag and drop file upload |
| summernote, @ckeditor/ckeditor5-build-classic | Rich text editors |
| ion-rangeslider, nouislider | Range sliders |
Tables
| Package | Used for |
|---|---|
| datatables.net-bs5 2.3.8 | DataTables for Bootstrap 5 |
| datatables.net-buttons-bs5 3.2.0 | Export buttons |
| datatables.net-responsive-bs5, -select-bs5, -keytable-bs5 | Responsive rows, row selection, keyboard navigation |
Advanced UI
| Package | Used for |
|---|---|
| dragula, sortablejs | Drag and drop, Kanban board |
| nestable2 1.6.0 | Nestable lists |
| alertifyjs 1.14.0 | Notifications and dialogs |
| lightbox2, photoswipe | Image gallery and lightbox |
Build tooling
| Package | Used for |
|---|---|
| gulp 5.0.1 | Task runner 5.0.1 |
| sass, gulp-sass | Dart Sass compiler |
| postcss, autoprefixer, rtlcss | Vendor prefixes and the RTL stylesheet |
| gulp-file-include 2.3.0 | Resolves the @@include partials |
| browser-sync 3.0.4 | Dev server with live reload |
| gulp-clean-css, gulp-uglify, gulp-imagemin | Minifies CSS, JS and images |
Change Log
What changed in each Adminox release.
1.0.0
| Area | Change |
|---|---|
| Framework | Upgraded from Bootstrap 4.5.2 to Bootstrap 5.3.x (npm) |
| Styles | Dart Sass with @use modules; colors are CSS custom properties, dark mode is an override sheet, RTL is generated with rtlcss |
| Pages | 58 HTML pages, including new components-buttons.html and components-typehead.html |
| Libraries | Installed with npm i and copied to src/assets/libs/ by the Gulp libs task |
| Scripts | All page scripts load with defer after the footer; no inline scripts |
| Tooling | Commands: npm i, gulp build, gulp watch |
| Branding | Renamed from Adminator to Adminox |
Frequently Asked Questions
Answers to the questions we hear most about the Adminox admin dashboard template.
General
What is Adminox?
What can I build with it?
Is there an Angular version?
Which browsers are supported?
Setup & Build
Do I need Node.js?
dist/ folder is plain HTML, CSS and JavaScript and can be hosted as it is. To rebuild, install Node.js 18 or newer and run npm install.Why does a page look unstyled after I edit the SCSS?
dist/assets/css/. Run npm start (it watches and recompiles) or npm run build after changing anything in src/.Where do I edit the HTML?
src/, never in dist/. dist/ is regenerated on every build and your changes there are overwritten.A library is missing under assets/libs.
npm run libs. It copies the js, css, fonts and images of every npm dependency into src/assets/libs/.Customization
How do I change the primary colour?
How do I switch between dark and light?
localStorage (adminator-theme) and applied before the first paint. Open layouts-dark.html to start in dark mode.How do I add a menu item?
src/partials/menu.html (vertical) and src/partials/horizontal-nav.html (horizontal). See Layout & Menu.How do I add a new page?
src/pages-starter.html, rename it, change the title include and the content, then add it to the menu. The build writes it to dist/.Licensing & Support
What do I get when I buy?
How do I get support?
Support
Your purchase includes one year of dedicated support and free lifetime updates. Check this guide and the comments in the page scripts before sending a question, and include your Node.js version and the steps to reproduce.
Ready to Build Your Admin Dashboard?
Get the full Adminox source, every page, lifetime updates and one year of dedicated support.