Argon Dashboard#
Argon Dashboard is a modern, responsive admin template created by Creative-Tim, built with Bootstrap 5. It offers a clean, modern design with carefully crafted components for building administrative interfaces, dashboards, and web applications.
π Argon Dashboard - Product page
π Argon Dashboard - Live Demo
π New to App-Generator? Join our 10k+ Community using GitHub One-Click SignIN.
Available Versions#
Free Bootstrap 5 version
PRO Bootstrap 5 version
React version
Angular version
Vue.js version
Laravel version
Key Features#
Bootstrap 5 Framework
SASS/SCSS files included
100% Responsive design
Custom components
Plugin integration
Documentation included
Regular updates
MIT License (Free version)
Technical Stack#
Frontend Framework: Bootstrap 5
CSS Preprocessor: SASS/SCSS
JavaScript: Vanilla JS & jQuery
Build System: npm/Gulp
Icons: Nucleo Icons & Font Awesome
Directory Structure#
argon-dashboard/
βββ assets/
β βββ css/
β β βββ argon.css
β β βββ argon.min.css
β βββ js/
β β βββ argon.js
β β βββ argon.min.js
β βββ img/
β β βββ brand/
β β βββ theme/
β βββ fonts/
β βββ scss/
β βββ argon.scss
β βββ custom/
β βββ core/
βββ docs/
βββ pages/
βββ gulpfile.js
Core Components#
1. Layout Structure#
<body>
<!-- Sidenav -->
<nav class="sidenav navbar navbar-vertical fixed-left navbar-expand-xs navbar-light bg-white">
<!-- Sidenav content -->
</nav>
<!-- Main content -->
<main class="main-content">
<!-- Navbar -->
<nav class="navbar navbar-top navbar-expand navbar-dark bg-primary border-bottom">
<!-- Navbar content -->
</nav>
<!-- Page content -->
<div class="container-fluid mt--6">
<!-- Content -->
</div>
</main>
</body>
3. Cards and Widgets#
Basic Card#
<div class="card">
<div class="card-header">
<h3 class="mb-0">Card Title</h3>
</div>
<div class="card-body">
Content goes here
</div>
</div>
Stat Card#
<div class="card card-stats">
<div class="card-body">
<div class="row">
<div class="col">
<h5 class="card-title text-uppercase text-muted mb-0">Total traffic</h5>
<span class="h2 font-weight-bold mb-0">350,897</span>
</div>
<div class="col-auto">
<div class="icon icon-shape bg-gradient-red text-white rounded-circle shadow">
<i class="ni ni-active-40"></i>
</div>
</div>
</div>
</div>
</div>
Customization#
1. SCSS Variables#
// Core variables
$primary: #5e72e4;
$secondary: #f7fafc;
$success: #2dce89;
$info: #11cdef;
$warning: #fb6340;
$danger: #f5365c;
// Custom spacing
$spacer: 1rem;
$spacers: (
0: 0,
1: ($spacer * .25),
2: ($spacer * .5),
3: $spacer,
4: ($spacer * 1.5),
5: ($spacer * 3)
);
// Sidebar variables
$navbar-vertical-width: 250px;
$navbar-vertical-padding-x: 1.5rem;
2. Theme Configuration#
// assets/js/argon.js
'use strict';
var Layout = (function() {
function initNavbarCollapse() {
// Initialize navbar collapse logic
}
function initColoredShadows() {
// Initialize colored shadows
}
return {
init: function() {
initNavbarCollapse();
initColoredShadows();
}
};
})();
Plugin Integration#
1. Chart.js Integration#
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
datasets: [{
label: 'Sales',
data: [50, 20, 10, 30, 15, 40, 20],
borderColor: '#5e72e4'
}]
},
options: {
responsive: true
}
});
2. Datatable Integration#
$(document).ready(function() {
$('#datatable-basic').DataTable({
responsive: true,
language: {
paginate: {
previous: "<i class='fas fa-angle-left'>",
next: "<i class='fas fa-angle-right'>"
}
}
});
});
License#
Free Version: MIT License
PRO Version: Check Creative-Timβs license terms
Links#
π New to App-Generator? Join our 10k+ Community using GitHub One-Click SignIN.
π
Download
products and start fast a new projectπ Bootstrap your startUp, MVP or Legacy project with a custom development sprint