Getting started

Install, compile & customize


Hello, I hope you find this template useful. AdminKit has been crafted on top of Bootstrap 5. The included docs don't replace the official ones, but provide a clear view of all extended styles and new components that this template provides on top of Bootstrap 5.

The docs includes information to understand how the theme is organized, how to make changes to the source code, and how to compile and extend it to fit your needs.

Thanks, and good luck!

Quick start


The theme includes a custom Webpack file, which can be used to quickly recompile and minify theme assets while developing or for deployment. You'll need to install Node.js before using Webpack.


Once Node.js is installed, clone our repo (or download AdminKit PRO) and run npm install to install the rest of AdminKit's dependencies. All dependencies will be downloaded to the node_modules directory.

# clone the repo
$ git clone my-project
# navigate to app's directory
$ cd my-project
# install dependencies
$ npm install


Now you're ready to modify the source files and generate new dist/ files. AdminKit is using webpack and webpack-dev-server to automatically detect file changes and start a local webserver at http://localhost:8080.

# serve with hot reload at localhost:8080
$ npm start
# detect file changes without starting a local webserver
$ npm run watch
# compile, optimize, minify and uglify all source files to /dist
$ npm run build


Inside the zip-file you'll find the following directories and files. Both compiled and minified distrubution files, as well as the source files are included in the package.

├── .babelrc
├── .npmrc
├── package.json
├── postcss.config.js
├── webpack.config.json
├── src/
│ ├── css/
│ │ ├── 1-variables/
│ │ ├── 2-mixins/
│ │ ├── 3-components/
│ │ ├── 4-utilities/
│ │ ├── 5-vendor/
│ │ └── app.scss
│ ├── js/
│ │ ├── modules/
│ │ ├── vendor/
│ │ └── app.js
│ ├── fonts/
│ └── img/
└── dist/
├── css/
│ └── app.css
├── js/
│ └── app.js
├── fonts/
└── images/

Basic Template

This basic template can be used as a guideline for how to structure new pages while using AdminKit. Some meta tags and our CSS & JS files are included inside the template.

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<!-- AdminKit CSS file -->
<link href="PATH/dist/css/app.css" rel="stylesheet">
<h1>Hello, world!</h1>
<!-- AdminKit JS file -->
<script src="PATH/dist/js/app.js"></script>


v2.3.0 – 2021-04-05
  • Add CDN to Free
  • Upgrade to bootstrap@5.0.0-beta3
  • Upgrade dependencies
v2.2.0 – 2021-02-25
  • Replace Inter font with CDN
  • Replace Font Awesome icons with Feather Free
  • Optimize bundle size
  • Bind `bootstrap` to window object
  • Update .nvmrc file
  • Upgrade to bootstrap@5.0.0-beta2
  • Upgrade dependencies
v2.1.0 – 2020-11-07
  • Add Sign In page Free
  • Add Sign Up page Free
  • Replace `.close` with `.btn-close`
  • Upgrade to bootstrap@5.0.0-alpha2
  • Upgrade dependencies
v2.0.1 – 2020-09-14
  • Fix console error on auth pages
  • Upgrade dependencies
v2.0.0 – 2020-09-04
  • Upgrade to Bootstrap 5
  • Drop jQuery as dependency*
  • Replace jvectormap-next with jsvectormap
  • Replace tempusdominus with flatpickr
  • Replace select2 with Choices.js Pro
  • Replace Toastr with Notyf Pro
  • Replace jQuery Mask Plugin with Inputmask Pro
  • Remove bootstrap-markdown Pro
  • Upgrade dependencies
*with the exception of DataTables Pro
v1.0.2 – 2020-07-26
  • Fix issue with dropdown overflow on mobile
  • Upgrade FullCalendar to v5 Pro
  • Upgrade dependencies
v1.0.1 – 2020-05-25
  • Add crypto dashboard (/dashboard-crypto.html) Pro
  • Upgrade to latest Bootstrap (4.5.0)
  • Upgrade dependencies
v1.0.0 – 2020-03-21
  • Initial release

Rapidly decrease your development time by using AdminKit PRO

Get AdminKit PRO