puikinsh/Adminator-admin-dashboard
Folders and files
| Name | Name | Last commit date | ||
|---|---|---|---|---|
Repository files navigation
Adminator is a responsive Bootstrap 5 Admin Template built with modern development tools. It provides you with a collection of ready to use code snippets and utilities, custom pages, a collection of applications and some useful widgets.
Latest Update (v3.0.0): Major architecture release with new utility modules (Events, Performance, Storage, Sanitize, Logger), testing infrastructure (Vitest), code splitting, bundle analyzer, and comprehensive documentation. Zero jQuery, zero lodash - pure vanilla JavaScript.
Looking for more premium admin templates? Visit DashboardPack.com for a curated collection of high-quality admin dashboard templates for various frameworks and technologies.
Performance Benefits: Faster load times, optimized code splitting, modern ES6+ utilities, and zero external library overhead.
Complete Documentation - Detailed setup guides, API reference, and examples
Preview of this awesome admin template available here: https://colorlib.com/polygon/adminator/index.html
Light Mode:
Dark Mode:
Demo Site: Here
- What's New in v3.0.0
- Getting Started
- Adminator for other platforms and frameworks
- Files/Folder Structure
- Deployment
- Built With
- Changelog
- Authors
- License
This release represents a comprehensive overhaul adding professional-grade utilities, testing, security, and optimized builds.
- Events - Event delegation, debounce, throttle (replaces lodash)
- Performance - ResizeObserver, IntersectionObserver, lazy loading utilities
- Storage - Safe localStorage wrapper with in-memory fallback
- Sanitize - HTML/input sanitization for XSS prevention
- Logger - Development-only logging utility
- Vitest - Modern, fast testing framework
- Coverage Reports - V8-based code coverage via
npm run test:coverage - Test Suites - Initial tests for theme, DOM, and logger utilities
- Code Splitting - Separate chunks for Chart.js (529KB), FullCalendar (654KB), Bootstrap
- Bundle Analyzer - New
npm run build:analyzefor visual inspection - Console Removal - TerserPlugin drops console/debugger in production
- Lodash Removed - Custom Events utility saves ~70KB
- API Reference - Complete docs in
docs/API.md - Component Guide - Development patterns in
docs/COMPONENT_GUIDE.md - TypeScript Declarations - IDE support via
types/adminator.d.ts - VSCode Settings - Project-specific editor configuration
- Dead Code Removed - Cleaned up unused files
- HTML Accessibility - Added
lang="en"to all 18 HTML pages - Zero Vulnerabilities - Full security audit passed
- Comprehensive dependency updates to latest versions
- Enhanced SCSS linting with stylelint-config-standard-scss
- Security vulnerability fixes (node-forge, js-yaml)
jQuery-Free Release - Complete removal of jQuery dependency with modern vanilla JavaScript:
- ~600KB Bundle Reduction: Eliminated jQuery and all jQuery-dependent plugins
- Faster Load Times: Native DOM manipulation for optimal performance
- Smaller Bundle Size: Significantly reduced JavaScript payload
- Modern ES6+ Code: Class-based architecture with modern JavaScript features
- Chart.js: Replaced jQuery Sparkline with Chart.js mini charts
- HTML5 Date Pickers: Enhanced native date inputs with Day.js support
- Vanilla DataTables: Custom table component with sorting and pagination
- SVG Pie Charts: Pure JavaScript circular progress indicators
- Vector Maps: JavaScript-based world map with markers and interactions
- Vanilla Popovers: Lightweight alternatives to Bootstrap JS components
- 100% Vanilla JavaScript: No jQuery dependency anywhere in the codebase
- Component Architecture: Modern class-based components (Sidebar, Charts, etc.)
- Enhanced DOM Utilities: jQuery-like functionality using native JavaScript
- Mobile Optimized: Touch-friendly interactions and responsive behavior
- Theme Integration: All new components fully support dark/light mode switching
- Smart Theme Toggle: Bootstrap-based switch with sun/moon icons and intuitive labels
- OS Preference Detection: Automatically detects and applies your preferred color scheme
- Persistent Storage: Remembers your theme choice across browser sessions
- Instant Switching: Real-time theme updates without page reload
- Component Integration: All charts, calendars, maps, and UI elements are theme-aware
- CSS Variables Architecture: Comprehensive color system with semantic naming
- Chart.js Integration: Dynamic color schemes for all chart types
- FullCalendar Support: Dark-mode aware calendar with proper contrast
- Vector Maps: Custom color palettes for both light and dark themes
- Component Compatibility: Theme support across all interactive elements
- Latest Dependencies: All 22+ dependencies updated to latest versions
- Modern Build Tools: webpack 5.99.9, webpack-dev-server 5.2.2
- ESLint 9.x: Migrated to modern flat config format
- Enhanced CSS: Latest Sass (1.89.2), PostCSS (8.5.6), Bootstrap (5.3.7)
- Updated Components: Chart.js 4.5.0, FullCalendar 6.1.17
- Zero Vulnerabilities: Complete security audit with all packages secure
You can use Adminator in several ways:
Install the complete template as an npm package:
# Install via npm
npm install adminator-admin-dashboard
# Or install via yarn
yarn add adminator-admin-dashboardPackage Information:
- Package Name:
adminator-admin-dashboard - Version: 3.0.0 (Architecture release)
- Size: 5.7 MB (includes source + built assets)
- Registry: https://www.npmjs.com/package/adminator-admin-dashboard
Usage after npm install:
# Navigate to the package directory
cd node_modules/adminator-admin-dashboard
# Install development dependencies (if you want to customize)
npm install
# Start development server
npm startWhat's included in the npm package:
- Complete source code (
src/directory) - Pre-built production assets (
dist/directory) - All dependencies and development tools
- Documentation (CLAUDE.md, CHANGELOG.md)
- Ready-to-use HTML templates
For development and customization, clone the repository:
- Node.js 18.12.0 or higher (tested with Node.js 23.11.0)
- npm (included with Node.js) or Yarn
- Git
# Clone the repository
git clone https://github.com/puikinsh/Adminator-admin-dashboard.git adminator
# Navigate to the project directory
cd adminator
# Install dependencies
npm install
# Start development server (available at http://localhost:4000)
npm start
# Alternative: Start with webpack dashboard
npm run dev- Fastest: Use prebuilt static assets from releases
- Recommended: Install via npm package for easy updates
- Development: Clone repository for full customization
# Development server with hot reload
npm start
# Development server with dashboard
npm run dev
# Build for production (optimized)
npm run build
# Build for production (unminified)
npm run release:unminified
# Build for production (minified)
npm run release:minified
# Preview production build
npm run preview
# Lint JavaScript files
npm run lint:js
# Lint SCSS files
npm run lint:scss
# Run all linters
npm run lint
# Run tests
npm run test
# Run tests with coverage
npm run test:coverage
# Analyze bundle size
npm run build:analyzeAdminator now includes a comprehensive dark mode system that works out of the box:
- Dark mode is automatically initialized on page load
- Detects your OS preference (light/dark) on first visit
- Remembers your choice across browser sessions
- Look for the Light/Dark toggle switch in the header navigation
- Click to instantly switch between light and dark themes
- Visual feedback with sun and moon icons
Complete Theme API Documentation →
Using the Theme API:
// Get current theme
const currentTheme = Theme.current(); // 'light' or 'dark'
// Switch themes programmatically
Theme.toggle();
// Set specific theme
Theme.apply('dark');
// Listen for theme changes
window.addEventListener('adminator:themeChanged', (event) => {
console.log('Theme changed to:', event.detail.theme);
});CSS Variables for Custom Styling:
.my-component {
background: var(--c-bkg-card);
color: var(--c-text-base);
border: 1px solid var(--c-border);
}Available CSS Variables:
--c-bkg-body- Main background--c-bkg-card- Card backgrounds--c-text-base- Primary text color--c-text-muted- Secondary text color--c-border- Border colors--c-primary- Primary brand color
View Complete CSS Variables Reference →
Complete Documentation Site - Comprehensive guides and API reference
- Installation Guide - Complete setup instructions
- Theme System - Dark mode and theming
- API Reference - JavaScript API documentation
- Examples - Integration examples
- Adminator right to left - Adminator modified to work with right to left languages like Persian and Arabic
Here is a brief explanation of the template folder structure and some of its main files usage:
└── src # Contains all template source files.
│ └── assets # Contains JS, CSS, images and icon fonts.
│ │ └── scripts # Contains all JavaScript files.
│ │ │ └── charts # Chart.js, Sparkline & Pie Chart plugins init.
│ │ │ └── chat # All chat app JS code.
│ │ │ └── constants # Template constant values like color values.
│ │ │ └── datatable # Date table plugin init.
│ │ │ └── datepicker # Bootstrap datepicker init.
│ │ │ └── email # All email app code.
│ │ │ └── fullcalendar # Fullcalendar plugin init.
│ │ │ └── googleMaps # Google maps API integration code.
│ │ │ └── masonry # Masonry layout code.
│ │ │ └── popover # Bootstrap popover plugin init.
│ │ │ └── scrollbar # Perfect scrollbar plugin init.
│ │ │ └── search # Topbar toggle search init.
│ │ │ └── sidebar # Sidebar JS code.
│ │ │ └── skycons # Animated icons plugin init.
│ │ │ └── utils # Basic utils used for proper rendering.
│ │ │ └── vectorMaps # Vector maps plugin init.
│ │ │ └── app.js # Main application entry point.
│ │ │
│ │ └── static # Contains the non-code files.
│ │ │ └── fonts # Contains icon fonts.
│ │ │ └── images # Contains all template images/svg.
│ │ │
│ │ └── styles # Contains all SCSS files.
│ │ └── spec # Contains custom SCSS files.
│ │ │ └── components # Contains all template components.
│ │ │ └── generic # Contains basic scaffolding styles.
│ │ │ └── screens # Contains views specific styles.
│ │ │ └── settings # Contains all template variables.
│ │ │ └── tools # Contains all mixins.
│ │ │ └── utils # Contains helper classes.
│ │ │ └── index.scss # Indicator file.
│ │ │
│ │ └── vendor # Contains all plugin files & custom styles.
│ │ └── index.scss # Main style entry point.
│ │
│ └── *.html # All HTML template pages.
└── webpack # Contains Webpack configuration.
│ └── plugins # Contains all Webpack plugins config.
│ └── rules # Contains Webpack loaders config.
│ └── config.js # Main Webpack configuration.
│ └── devServer.js # Development server configuration.
│ └── manifest.js # Build system constants.
│
└── .babelrc # Babel ES6 transpiler configuration.
└── .editorconfig # Code editor consistency settings.
└── eslint.config.mjs # ESLint 9.x flat configuration.
└── .gitattributes # Git attributes configuration.
└── .gitignore # Git ignore patterns.
└── .stylelintrc.json # SCSS/CSS linting configuration.
└── browserslist # Supported browsers configuration.
└── CHANGELOG.md # Version history and updates.
└── package.json # Node.js package configuration.
└── README.md # This documentation file.
└── webpack.config.js # Webpack entry configuration.
In deployment process, you have several commands:
- Production Build - Generate optimized assets for production:
npm run build- Production Preview - Preview the production build locally:
npm run preview- Custom Builds:
# Unminified production build (for debugging)
npm run release:unminified
# Minified production build (smallest size)
npm run release:minifiedThe built files will be available in the dist/ directory.
- Bootstrap 5.3.8 - Modern CSS framework
- Webpack 5.103.0 - Module bundler and build tool
- Babel 7.28.x - JavaScript transpiler
- Sass 1.94.2 - CSS preprocessor
- PostCSS 8.5.6 - CSS transformations
- ESLint 9.39.1 - JavaScript linting (flat config)
- Stylelint 16.26.1 - CSS/SCSS linting
- Chart.js 4.5.1 - Modern charting library
- FullCalendar 6.1.19 - Interactive calendar
- DataTables - Advanced table functionality
- Easy Pie Chart - Animated pie charts
- Perfect Scrollbar 1.5.6 - Custom scrollbars
- Chart.js 4.5.1 - Modern charting library (replaces jQuery Sparkline)
- jsvectormap 1.7.0 - Interactive vector maps (replaces jVectorMap)
- Day.js 1.11.19 - Modern 2KB date library (replaces Moment.js)
- Masonry 4.2.2 - Grid layouts
- 100% Vanilla JavaScript - No jQuery or lodash dependencies
- Font Awesome - Icon library
- Themify Icons - Additional icons
- Roboto Font - Google Fonts
- HTML5 Date Inputs - Enhanced native date pickers (replaces Bootstrap Datepicker)
- Skycons - Animated weather icons
- Load Google Maps API - Maps integration
See CHANGELOG.md for detailed version history.
📚 Online Documentation includes comprehensive guides for all features.
- New Utility Modules - Events, Performance, Storage, Sanitize, Logger
- Testing Infrastructure - Vitest with coverage reporting
- Code Splitting - Separate chunks for Chart.js, FullCalendar, Bootstrap
- Bundle Analyzer - Visual bundle inspection via
npm run build:analyze - Lodash Removed - Custom Events utility replaces lodash (~70KB saved)
- Documentation - API reference and component development guide
- TypeScript Declarations - IDE support with type definitions
- V 2.9.0: Comprehensive dependency updates, SCSS linting improvements
- V 2.8.1: Bootstrap 5.3.8, security updates, and enhanced tooling
- V 2.8.0: Webpack 5 asset modules and dependency modernization
- V 2.7.1: 100% jQuery-Free with modern vanilla JavaScript
- V 2.6.0: Complete Dark Mode System with theme switching
- V 2.5.0: Updated all dependencies, ESLint 9.x, zero vulnerabilities
- V 2.1.0: Upgraded all dependencies
- V 2.0.0: Upgrade to Bootstrap 5
- V 1.1.0: Upgrade to webpack 5
- V 1.0.0: Initial Release
Visit DashboardPack.com - Your premier destination for high-quality admin dashboard templates:
- Premium and free admin templates for all major frameworks
- React, Vue, Angular, Bootstrap, and vanilla JavaScript templates
- Modern designs with dark mode support
- Comprehensive documentation and support
- Regular updates and new releases
- Bootstrap Dashboards
- Bootstrap Templates
- HTML Templates
- Free Admin Dashboards
- Website Templates
- Free CSS Templates
- WordPress Themes
Adminator is licensed under The MIT License (MIT). Which means that you can use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the final products. But you always need to state that Colorlib is the original author of this template.