DEV Community

Cover image for AdminKit - Open Source Bootstrap 5 Admin & Dashboard Template
Paul Laros πŸ‡³πŸ‡±
Paul Laros πŸ‡³πŸ‡±

Posted on • Originally published at github.com

AdminKit - Open Source Bootstrap 5 Admin & Dashboard Template

A professional Admin & Dashboard template based on Bootstrap 5 that comes with hundreds of UI components, forms, tables, charts, pages and icons. AdminKit does not require jQuery and neither does one of the 3rd party libraries AdminKit is using. See demo.

AdminKit, bootstrap admin and dashboard template

Bootstrap 5 & Vanilla JavaScript

AdminKit, and all third-party libraries used in the admin template, do not require jQuery as a dependency.

12+ Example Pages

AdminKit includes 12+ example pages, including a dashboard, sign in, sign up and profile pages.

Fully Responsive

With mobile, tablet & desktop support it doesn't matter what device you're using. AdminKit is responsive in all browsers.

Cross-Browser

Our themes are working perfectly with Chrome, Firefox, Safari, Opera, and Edge. We're working hard to support them.

Open source ❀️

AdminKit is an open source project licensed under MIT License. If you like this project, please support us by starring our public GitHub Repository.

AdminKit, Bootstrap dashboard with compact sidebar

Quick start

Download

Build tools

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, run npm install to install the rest of AdminKit's dependencies. All dependencies will be downloaded to the node_modules directory.

npm install
Enter fullscreen mode Exit fullscreen mode

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

npm start
Enter fullscreen mode Exit fullscreen mode

Compile, optimize, minify and uglify all source files to dist/ folder:

npm run build
Enter fullscreen mode Exit fullscreen mode

CDN support

All files included in the @adminkit/core npm package are available over a CDN.

CSS:

<link rel="stylesheet" href="https://unpkg.com/@adminkit/core@latest/dist/css/app.css">
Enter fullscreen mode Exit fullscreen mode

Javascript:

<script src="https://unpkg.com/@adminkit/core@latest/dist/js/app.js"></script>
Enter fullscreen mode Exit fullscreen mode

File structure

The package contains the following directories and files:

adminkit/
β”œβ”€β”€ .babelrc
β”œβ”€β”€ .eslintrc
β”œβ”€β”€ .nvmrc
β”œβ”€β”€ README.md
β”œβ”€β”€ package.json
β”œβ”€β”€ postcss.config.js
β”œβ”€β”€ webpack.config.js
β”œβ”€β”€ src/
β”‚   β”œβ”€β”€ fonts/
β”‚   β”œβ”€β”€ img/
β”‚   β”œβ”€β”€ js/
β”‚   β”‚   β”œβ”€β”€ modules/
β”‚   β”‚   └── app.js
β”‚   └── scss/
β”‚       β”œβ”€β”€ 1-variables/
β”‚       β”œβ”€β”€ 2-mixins/
β”‚       β”œβ”€β”€ 3-components/
β”‚       β”œβ”€β”€ 4-utilities/
β”‚       β”œβ”€β”€ 5-vendor/
β”‚       └── app.scss
└── dist/
    β”œβ”€β”€ css/
    β”‚   └── app.css
    └── js/
        └── app.js
Enter fullscreen mode Exit fullscreen mode

Resources

Upgrade to PRO ✨

AdminKit, Bootstrap dashboard with dark mode

Get more power with AdminKit PRO, a premium variant of AdminKit, featuring hundreds of UI components, forms, tables, charts, pages, and icons. Check out AdminKit PRO

Top comments (2)

Collapse
 
megatkc profile image
MegaTKC

Wow, this is an awesome admin dashboard template! I would love to use this with my CMS. Keep up the great work! :)

Collapse
 
paullaros profile image
Paul Laros πŸ‡³πŸ‡±

Thanks, appreciate it!