SkillAgentSearch skills...

CoolAdmin

Free Bootstrap 5 based admin dashboard template - open source and licensed under MIT license

Install / Use

/learn @puikinsh/CoolAdmin

README

CoolAdmin - Modern Bootstrap 5 Admin Dashboard Template

CoolAdmin Dashboard

Bootstrap Chart.js FontAwesome Swiper Vanilla JS License

CoolAdmin is a modern, responsive, and feature-rich admin dashboard template built with Bootstrap 5.3.8 and vanilla JavaScript. Completely rewritten in 2025 for optimal performance, modern web standards, and future-proofing.

What's New in v2.2.0 (December 2025)

Latest Dependencies & Performance Improvements

  • Bootstrap 5.3.8 - Latest stable framework with bug fixes and improvements
  • Font Awesome 7.1.0 - Latest FA7 release with 4,500+ new icons
  • Chart.js 4.5.1 - Latest patch with performance improvements
  • Swiper.js 12.0.3 - Major upgrade with CSS-only theming and lighter bundle
  • Perfect Scrollbar 1.5.6 - Enhanced scrollbar with passive touch events
  • Complete Icon Migration - All icons updated to FA7 syntax for perfect display

Preview

Dashboard Variations

| Dashboard 1 | Dashboard 2 | Dashboard 3 | Dashboard 4 | |-------------|-------------|-------------|-------------| | Dashboard 1 | Dashboard 2 | Dashboard 3 | Dashboard 4 |

UI Components & Pages

  • Interactive Charts - Line, Bar, Doughnut, and Real-time charts
  • Data Tables - Responsive tables with horizontal scroll indicators
  • Modern Forms - Bootstrap 5 native form components
  • Advanced Calendar - FullCalendar v6+ integration
  • UI Elements - Cards, Modals, Buttons, Alerts, Progress bars
  • Mobile Optimized - Perfect experience on all devices

Key Features

Modern Architecture

  • Bootstrap 5.3.8 with the latest utilities and components
  • Vanilla JavaScript - No jQuery dependency for better performance
  • ES6+ Code - Modern JavaScript patterns and best practices
  • Modular Design - Easy to customize and extend
  • SEO Optimized - Clean markup and semantic HTML5

Advanced Data Visualization

  • Chart.js 4.5.1 - Latest version with enhanced performance
  • 6 Pre-built Chart Types - Line, Bar, Doughnut, Area, and more
  • Responsive Charts - Perfect display on all screen sizes
  • Real-time Updates - Dynamic data visualization capabilities
  • Modern Animations - Smooth transitions and interactions

Mobile-First Design

  • Responsive Grid System - Bootstrap 5's improved grid
  • Touch-Friendly Navigation - Optimized sidebar and menus
  • Mobile Tables - Horizontal scroll with visual indicators
  • Gesture Support - Swipe navigation for mobile devices
  • Optimized Performance - Fast loading on mobile networks

Beautiful UI Components

  • 24+ HTML Pages - Comprehensive dashboard layouts
  • 50+ UI Elements - Cards, buttons, forms, tables, modals
  • Modern Design System - Consistent colors, typography, and spacing
  • Thin Custom Scrollbars - Subtle 8px scrollbars for better UX
  • Clean Typography - Readable fonts and proper hierarchy

Go Pro — Premium Admin Templates

Want more layouts, richer components, and priority support? Our premium templates on DashboardPack are built for teams shipping real products.

<table> <tr> <td align="center" width="50%"> <a href="https://dashboardpack.com/theme-details/tailpanel/?utm_source=github&utm_medium=readme&utm_campaign=cooladmin"> <img src="screenshots/tailpanel.png" alt="TailPanel — React admin dashboard with Tailwind CSS styling" width="100%"> </a> <br> <a href="https://dashboardpack.com/theme-details/tailpanel/?utm_source=github&utm_medium=readme&utm_campaign=cooladmin"><strong>TailPanel</strong></a> <br> <sub>React + TypeScript + Tailwind CSS. 9 layouts, theme switching, Vite-powered.</sub> </td> <td align="center" width="50%"> <a href="https://dashboardpack.com/theme-details/admindek-html/?utm_source=github&utm_medium=readme&utm_campaign=cooladmin"> <img src="screenshots/admindek.png" alt="Admindek — responsive admin panel with analytics dashboards" width="100%"> </a> <br> <a href="https://dashboardpack.com/theme-details/admindek-html/?utm_source=github&utm_medium=readme&utm_campaign=cooladmin"><strong>Admindek</strong></a> <br> <sub>Bootstrap 5. 100+ UI elements, dark/light themes, RTL ready, 10 color schemes.</sub> </td> </tr> <tr> <td align="center" width="50%"> <a href="https://dashboardpack.com/theme-details/adminty-html-dashboard/?utm_source=github&utm_medium=readme&utm_campaign=cooladmin"> <img src="screenshots/adminty.png" alt="Adminty — comprehensive admin dashboard with 160+ pages" width="100%"> </a> <br> <a href="https://dashboardpack.com/theme-details/adminty-html-dashboard/?utm_source=github&utm_medium=readme&utm_campaign=cooladmin"><strong>Adminty</strong></a> <br> <sub>Bootstrap 5. 160+ pages covering every common admin use case out of the box.</sub> </td> <td align="center" width="50%"> <a href="https://dashboardpack.com/theme-details/architectui-dashboard-html-pro/?utm_source=github&utm_medium=readme&utm_campaign=cooladmin"> <img src="screenshots/architectui.png" alt="ArchitectUI — professional admin UI with 250+ integrated components" width="100%"> </a> <br> <a href="https://dashboardpack.com/theme-details/architectui-dashboard-html-pro/?utm_source=github&utm_medium=readme&utm_campaign=cooladmin"><strong>ArchitectUI</strong></a> <br> <sub>Bootstrap 5. 250+ widgets, plug-and-play modular design, 9 dashboard variations.</sub> </td> </tr> <tr> <td align="center" width="50%"> <a href="https://dashboardpack.com/theme-details/kero-jquery-html-dashboard-pro/?utm_source=github&utm_medium=readme&utm_campaign=cooladmin"> <img src="screenshots/kero.png" alt="Kero — Webpack-powered admin template with dual layout options" width="100%"> </a> <br> <a href="https://dashboardpack.com/theme-details/kero-jquery-html-dashboard-pro/?utm_source=github&utm_medium=readme&utm_campaign=cooladmin"><strong>Kero</strong></a> <br> <sub>Bootstrap 5 + Webpack. Choose between horizontal or sidebar navigation, SASS themes.</sub> </td> <td align="center" width="50%"> <a href="https://dashboardpack.com/theme-details/cryptocurrency-dashboard/?utm_source=github&utm_medium=readme&utm_campaign=cooladmin"> <img src="screenshots/cryptocurrency.png" alt="Cryptocurrency Dashboard — crypto asset management admin panel" width="100%"> </a> <br> <a href="https://dashboardpack.com/theme-details/cryptocurrency-dashboard/?utm_source=github&utm_medium=readme&utm_campaign=cooladmin"><strong>Cryptocurrency Dashboard</strong></a> <br> <sub>Bootstrap. Designed for crypto exchanges, ICO dashboards, and portfolio tracking.</sub> </td> </tr> </table> <p align="center"> <a href="https://dashboardpack.com/?utm_source=github&utm_medium=readme&utm_campaign=cooladmin"><strong>Explore the Full Collection</strong></a> </p>

Technical Specifications

Core Technologies

{
  "bootstrap": "5.3.8",
  "chart.js": "4.5.1",
  "fontawesome": "7.1.0",
  "swiper": "12.0.3",
  "javascript": "ES6+ Vanilla",
  "css": "CSS3 + Custom Properties",
  "html": "HTML5 Semantic Markup"
}

Browser Support

| Browser | Version | Status | |---------|---------|--------| | Chrome | 88+ | Fully Supported | | Firefox | 78+ | Fully Supported | | Safari | 14+ | Fully Supported | | Edge | 88+ | Fully Supported | | Mobile Safari | iOS 14+ | Fully Supported | | Chrome Mobile | Android 8+ | Fully Supported |

Performance Metrics

  • Bundle Size: 2.4MB (25% reduction from v1.0)
  • Load Time: ~30% faster than jQuery-based version
  • Mobile Performance: Optimized for 3G/4G networks
  • Dependencies: Only 8 core dependencies (reduced from 15+)

File Structure

CoolAdmin/
├── 📁 css/
│   ├── theme.css                  # Main stylesheet with Bootstrap 5 customizations
│   ├── font-face.css             # Custom font definitions
│   ├── aos.css                   # Animate On Scroll styles
│   └── swiper-bundle.min.css     # Modern slider/carousel styles
├── 📁 js/
│   ├── vanilla-utils.js          # 🆕 jQuery replacement utilities
│   ├── main-vanilla.js           # 🔄 Updated Chart.js v4 configurations
│   ├── bootstrap5-init.js        # Bootstrap 5 component initialization
│   ├── modern-plugins.js         # 🆕 Modern plugin configurations
│   ├── swiper-bundle.min.js      # Touch slider functionality
│   └── aos.js                    # Scroll animations
├── 📁 vendor/
│   ├── bootstrap-5.3.8.min.css  # Latest Bootstrap framework
│   ├── bootstrap-5.3.8.bundle.min.js
│   ├── fontawesome-7.1.0/       # Latest Font Awesome icons
│   ├── chartjs/chart.umd.js-4.5.1.min.js # Chart.js v4.5.1 UMD bundle
│   ├── perfect-scrollbar/        # Custom scrollbar functionality
│   ├── css-hamburgers/          

Related Skills

View on GitHub
GitHub Stars1.1k
CategoryDevelopment
Updated1d ago
Forks655

Languages

HTML

Security Score

85/100

Audited on Mar 22, 2026

No findings