HTML
Add AdminKit to a plain HTML page with the CDN or npm build of @adminkit/core, including the sidebar and navbar layout markup.
AdminKit is an HTML, CSS and JavaScript template. The smallest integration is one page that links the compiled CSS and JavaScript and uses the layout markup below.
Install
Link the free package from a CDN:
<link href="https://unpkg.com/@adminkit/core/dist/css/app.css" rel="stylesheet">
<script src="https://unpkg.com/@adminkit/core/dist/js/app.js"></script>Or install it with npm and serve node_modules/@adminkit/core/dist/ yourself:
npm install @adminkit/coreAdminKit PRO is not published to npm. Copy the dist/ folder from the download into your project and point the paths below at it.
Import the CSS and JavaScript
Put the stylesheet in <head> and app.js at the end of <body>. app.js bundles Bootstrap, the Lucide icons and the sidebar behaviour, and sets them up when the page loads and for markup added later.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Dashboard</title>
<link href="https://unpkg.com/@adminkit/core/dist/css/app.css" rel="stylesheet">
</head>
<body>
<!-- layout, see below -->
<script src="https://unpkg.com/@adminkit/core/dist/js/app.js"></script>
</body>
</html>Optional: avoid a color mode flash
Without head.js, app.js applies the stored color mode once it runs, so a visitor who picked the mode opposite to their operating system briefly sees the other one. head.js applies it before the first paint. Load it as a plain script in <head>, before the stylesheet:
<script src="https://unpkg.com/@adminkit/core/dist/js/head.js"></script>Minimal layout
The body is a .wrapper with the sidebar and a .main column that holds the navbar and the content. app.js uses the js-sidebar, js-simplebar and js-sidebar-toggle classes for the custom scrollbar and the sidebar toggle, and renders an inline SVG inside each data-lucide icon. The sidebar is a Bootstrap .offcanvas-lg: from the lg breakpoint (992px) up the toggle hides and shows it, below it the toggle opens it as a sheet over the page.
<div class="wrapper">
<nav id="sidebar" class="sidebar js-sidebar offcanvas-lg offcanvas-start" tabindex="-1" aria-label="Sidebar">
<div class="sidebar-content js-simplebar">
<a class="sidebar-brand" href="index.html">
<span class="align-middle">AdminKit</span>
</a>
<ul class="sidebar-nav">
<li class="sidebar-header">Pages</li>
<li class="sidebar-item active">
<a class="sidebar-link" href="index.html">
<i class="align-middle" data-lucide="sliders-vertical"></i> <span class="align-middle">Dashboard</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="profile.html">
<i class="align-middle" data-lucide="user"></i> <span class="align-middle">Profile</span>
</a>
</li>
</ul>
</div>
</nav>
<div class="main">
<nav class="navbar navbar-expand navbar-light navbar-bg">
<button type="button" class="sidebar-toggle js-sidebar-toggle" aria-controls="sidebar" aria-expanded="true" aria-label="Collapse sidebar">
<i class="hamburger align-self-center"></i>
</button>
</nav>
<main class="content">
<div class="container-fluid p-0">
<h1 class="h3 mb-3">Dashboard</h1>
<div class="card">
<div class="card-body">Hello from AdminKit.</div>
</div>
</div>
</main>
</div>
</div>Run
Serve the folder with any static file server, for example:
npx serve .Open the printed URL (http://localhost:3000 by default). You should see the dark sidebar with two entries, the navbar with the hamburger toggle, and the card in the content area. Clicking the toggle collapses the sidebar.
Notes
- The CDN URLs above are unpinned and serve the latest published version. Pin a version in production, for example
https://unpkg.com/@adminkit/core@<version>/dist/js/app.js.
Last updated on