Installation

Prerequisites

  • A web project using HTML/CSS (Flask, Rails, PHP, or static)
  • Bootstrap 5.x (included with Argon Dashboard)

Step 1: Include Argon Dashboard

Download the Argon Dashboard CSS files from the internal asset repository. Popper.js and Bootstrap JS can be loaded from CDN:

<!-- CSS (in <head>) -->
<link rel="stylesheet" href="/assets/css/nucleo-icons.css">
<link rel="stylesheet" href="/assets/css/nucleo-svg.css">
<link rel="stylesheet" href="/assets/css/argon-dashboard.min.css">

<!-- JS (before closing </body> tag, in this order) -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js"></script>
<script src="/assets/js/argon-dashboard.min.js"></script>

All three JS files are required and must be loaded in this order:

  1. popper.min.js — Positioning engine for dropdowns, tooltips, and popovers (CDN)
  2. bootstrap.min.js — Bootstrap 5 component JavaScript (dropdowns, modals, collapses, tabs, etc.) (CDN)
  3. argon-dashboard.min.js — Argon Dashboard UI layer (sidebar behaviour, scrollbar, charts) (self-hosted)

Step 2: Add KMG Custom Styles

Include the KMG custom stylesheet after Argon Dashboard:

<link rel="stylesheet" href="/assets/css/kmg-custom.css">

Step 3: Add Icon Fonts

We use Nucleo Icons (self-hosted, bundled with Argon Dashboard) and Font Awesome (via CDN):

<!-- Nucleo Icons (self-hosted) -->
<link rel="stylesheet" href="/assets/css/nucleo-icons.css">

<!-- Font Awesome (CDN) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Step 4: Base HTML Template

Use this as your starting point:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My KMG App</title>
  <link rel="stylesheet" href="/assets/css/nucleo-icons.css">
  <link rel="stylesheet" href="/assets/css/nucleo-svg.css">
  <link rel="stylesheet" href="/assets/css/argon-dashboard.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="/assets/css/kmg-custom.css">
</head>
<body class="g-sidenav-show bg-gray-100">
  <!-- Sidebar navigation -->
  <aside class="sidenav bg-white navbar navbar-vertical navbar-expand-xs border-0 border-radius-xl my-3 fixed-start ms-4">
    <!-- Your navigation here -->
  </aside>

  <!-- Main content -->
  <main class="main-content position-relative border-radius-lg">
    <!-- Your content here -->
  </main>

  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js"></script>
  <script src="/assets/js/argon-dashboard.min.js"></script>
</body>
</html>

Important Notes

  • Self-host Argon Dashboard and Nucleo assets. These are bundled with the Argon Dashboard distribution and are not available on public CDNs.
  • CDNs are fine for standard libraries. Popper.js, Bootstrap JS, and Font Awesome can be loaded from CDNs (jsDelivr, cdnjs).
  • Use the standard sidebar layout. All internal applications should use the Argon Dashboard sidebar navigation pattern.
  • Follow the color palette. See the Guidelines section for approved colors and typography.
On this page