Argon Dashboard

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.

👉 New to App-Generator? Sign IN with GitHub or Generate Web Apps in no time (free service).

Argon Dashboard - open-source dashboard template provided by Creative-Tim

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