AdminKit is a free & open-source HTML dashboard & admin template based on Bootstrap 5

  • By AdminKit
  • Last update: Jan 7, 2023
  • Comments: 11

AdminKit is a free & open-source HTML dashboard & admin template based on Bootstrap 5

AdminKit

AdminKit is a free & open-source HTML dashboard & admin template based on Bootstrap 5.

NPM version License GitHub issues open GitHub issues closed Live Demo Download
GitHub stars

Preview

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 Demo

Features

  • Customizable: You don't need to be an expert to customize AdminKit. Our code is very readable and well documented.
  • 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.
  • Clean Code: We strictly follow Bootstrap's guidelines to make your integration as easy as possible. All code is handwritten.
  • No jQuery: AdminKit, and all third-party libraries used in the admin template, do not require jQuery as a dependency.
  • Regular Updates: From time to time you'll receive an update containing new components, improvements, and bugfixes.

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

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

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

npm run build

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">

Javascript:

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

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

Browser Support

Edge
Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
iOS Safari
iOS Safari
last version last 2 versions last 2 versions last 2 versions last 2 versions

Resources

Bugs and feature requests

Found a bug or have a feature request? Please open a new issue.

Upgrade to PRO

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

Free Version AdminKit PRO
15 Demo Pages 45+ Demo Pages
1 Plugin 10+ Plugins
1 Color Scheme 3 Color Schemes
All Bootstrap 5 Components
Dark Mode 🌙
Compact Sidebar
Calendar
Advanced Forms
Drag and Drop
Toast Notifications
WYSIWYG Editors
Premium Support

Github

https://github.com/adminkit/adminkit

Comments(11)

  • 1

    Can't use links in top navbar's notification dropdown

    The system dropdown notifications (on the top navbar) break when inserting a link.

    <a href="#" class="list-group-item">
        <div class="row g-0 align-items-center">
            <div class="col-2">
                <i class="text-primary" data-feather="info"></i>
            </div>
            <div class="col-10">
                <div class="text-dark">System Notification</div>
                <div class="text-muted small mt-1">This is a test notification...</div>
                <div class="text-muted small mt-1">4 hours ago</div>
                <div class="text-muted small mt-1"><a href="#">mark as read</a></div>
            </div>
        </div>
    </a>
    

    It seems like some javascript is going crazy here because it grabs the list-group-item link tag and repeats it multiple times on it's own.. No, I didn't duplicate it and mess up the HTML, it automatically is grabbing it and inserting the link in there. When I remove the link tag from mark as read, it works fine.

    Screen Shot 2022-01-28 at 1 50 06 AM
  • 2

    When clicking on a table TH it suddenly re-orders.

    Current Behavior 😯

    I've generated a table with th and td tags, and on clicking the th element it suddenly re-order to a-z. It looks like it will do only if the table has left/right th and td.

    Expected Behavior 🤔

    Do nothing on click, never asked this. Cannot find an example on the demo site

    Steps to Reproduce 🕹

    Steps:

    1. Create a card with table element and use class table
    2. Setup the code like below.
    3. Click on the TH element inside the browser
    4. You will see it re-order according to values.
    <!-- Example HTML -->
    <table class="table">
        <tbody>
            <tr>
                <th>Element 1</th>
                <td>Value element 1</td>
            </tr>
            <tr>
                <th>Ascending name</th>
                <td>Value ascending</td>
            </tr>
            <tr>
                <th>Descending name</th>
                <td>value descending</td>
            </tr>
        </tbody>
    </table>
    

    Your Environment 🌎

    • Browser: Google Chrome 104.0.5112.101
    • OS: Windows 10
    • Screen size: Different screens/sizes same behavior

    Screenshots 📷

    Not available, this can only be checked on active screen

  • 3

    AdminKit theme for select2, or another enhanced dropdown library

    Summary 💡

    The adminkit library is lacking an official integration with a library that enhances dropdowns, for example select2. A library like that is a crucial component to providing more user friendly forms for the user. If we choose to implement such library on our adminkit themed website, the dropdown's styling does not fit with adminkit. It's a lot of work to manually make it all look neatly integrated. Therefore, it would be very appreciated to have one of those libraries styled for us with the kit.

    Examples 🌈

    Straight after dropping in select2:

    image

    I still haven't covered all the different select2 configurations, or all the adminkit themes, but this is a nice preview of what it could look like. I did this by manually overwriting some CSS:

    image

    Motivation 🔦

    Searching in a dropdown with a lot of items is easier with a library like select2. They provide a searchbox and also async ajax searching. They also allow multi selects with a pills like visualisation.

  • 4

    A .table-striped inside a .card ignores border-radius on odd rows

    Current Behavior 😯

    When you put a .table-striped inside a .card, and you have an odd row at the top or bottom, the top or bottom border radius respectively of the card gets ignored. Giving you a sharp corner.

    Expected Behavior 🤔

    The card keeps its border radius.

    Steps to Reproduce 🕹

    Most basic:

    <div class="card">
        <table class="table table-striped">
            <tbody>
                <tr><td>Something 1</td></tr>
                <tr><td>Something 2</td></tr>
            </tbody>
        </table>
    </div>
    

    Your Environment 🌎

    • Browser: Chrome 102.0.5005.63
    • OS: Windows 10
    • Screen size: no impact

    Screenshots 📷

    The phenomenon can be seen on the adminkit live demo page (Striped Rows section: https://demo.adminkit.io/tables-bootstrap.html Here is a gif of the demo page (look at bottom radiuses): adminkit-card-table-border-bug

    For me it looks like this (look at top radiuses):

    image

  • 5

    Npm start not working

    I was not able to start the project with the configured packages and their versions.

    Current Behavior 😯

    The project is not running with npm start. It receives the following error:

    $ npm run start
    
    > @adminkit/[email protected] start
    > webpack serve --config webpack.config.js --progress
    
    [webpack-cli] Unable to load '@webpack-cli/serve' command
    [webpack-cli] TypeError: options.forEach is not a function
        at WebpackCLI.makeCommand (/Users/workspace/frontend/adminkit/node_modules/webpack-cli/lib/webpack-cli.js:173:25)
        at ServeCommand.apply (/Users/workspace/frontend/adminkit/node_modules/@webpack-cli/serve/lib/index.js:41:19)
        at loadCommandByName (/Users/workspace/frontend/adminkit/node_modules/webpack-cli/lib/webpack-cli.js:909:35)
        at async Command.<anonymous> (/Users/workspace/frontend/adminkit/node_modules/webpack-cli/lib/webpack-cli.js:1485:17)
        at async Promise.all (index 0)
        at async WebpackCLI.run (/Users/workspace/frontend/adminkit/node_modules/webpack-cli/lib/webpack-cli.js:1523:9)
        at async runCLI (/Users/workspace/frontend/adminkit/node_modules/webpack-cli/lib/bootstrap.js:11:9)
    

    Expected Behavior 🤔

    The project should correctly start with npm start

    Steps to Reproduce 🕹

    Steps:

    1. check out the project
    2. perform npm i
    3. perform npm start
    4. check the command line output

    Your Environment 🌎

    • OS: MacOS
    • node: 16.13.0
    • npm: 8.3.1

    Additional Information

    I took a quick check on the options variable in webpack-cli. And somehow the options variable is a promise (rejected) and not an array. Upgrading the dependency webpack-cli to 4.9.1 solves it for me.

  • 6

    Dropdown appears below content instead of attached to top element (Mobile)

    image

    To reproduce, browse in a mobile viewer and go to https://demo.adminkit.io/pages-clients.html

    Scroll down to Angela Ramos and click on the three dots:

    image

    The menu should appear there, instead it's below the rest of the content.

  • 7

    Warning Messages Babel/polyfill: Bump corejs to v3?

    With Yarn 2, I"m getting a warning message about babel/polyfill. (It's in AdminkitPro, but I think it has the same issue for the free version).

    In my webpack, I'm using

        // enables @babel/preset-env polyfills
        .configureBabelPresetEnv((config) => {
            config.useBuiltIns = 'usage';
            config.corejs = 3;
        })
    

    Here's the error:

        at C (/home/tac/ca/ac/.yarn/releases/yarn-berry.cjs:2:364565)
    tac@tac-XPS-13-7390:~/ca/ac$ yarn install
    ➤ YN0000: ┌ Resolution step
    ➤ YN0061: │ @babel/polyfill@npm:7.12.1 is deprecated: 🚨 This package has been deprecated in favor of separate inclusion of a polyfill and regenerator-runtime (when needed). See the @babel/polyfill docs (https://babeljs.io/docs/en/babel-polyfill) for more information.
    ➤ YN0061: │ core-js@npm:2.6.12 is deprecated: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
    
    

    In Yarn 1:

    yarn install
    yarn install v1.23.0-20210103.1434
    [1/4] Resolving packages...
    warning @symfony/webpack-encore > webpack-dev-server > sockjs > [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
    warning @symfony/webpack-encore > resolve-url-loader > rework > css > [email protected]: Please see https://github.com/lydell/urix#deprecated
    warning @symfony/webpack-encore > resolve-url-loader > rework > css > source-map-resolve > [email protected]: Please see https://github.com/lydell/urix#deprecated
    warning @symfony/webpack-encore > resolve-url-loader > rework > css > source-map-resolve > [email protected]: https://github.com/lydell/resolve-url#deprecated
    warning adminkit-pro > @babel/[email protected]: 🚨 This package has been deprecated in favor of separate inclusion of a polyfill and regenerator-runtime (when needed). See the @babel/polyfill docs (https://babeljs.io/docs/en/babel-polyfill) for more information.
    warning adminkit-pro > @babel/polyfill > [email protected]: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
    
  • 8

    Add to YarnPkg.com

    I'd love to be able to install this with

    yarn add adminkit/adminkit
    

    Alas, it looks like there an old, unrelated adminkit there already.

    https://yarnpkg.com/?q=adminkit&p=1

    I think this is what will help me, but I'll create another issue that gets more to the core of what I'm confused about.

  • 9

    babel/traverse, popper installation issues

    git clone .. followed by npm install gives this error:

    npm ERR! 404 Not Found - GET https://registry.npmjs.org/@babel/traverse/-/traverse-7.12.17.tgz - Not found
    npm ERR! 404 
    npm ERR! 404  '@babel/traverse@https://registry.npmjs.org/@babel/traverse/-/traverse-7.12.17.tgz' is not in the npm registry.
    npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
    

    Also, a big plus of bootstrap 5 is using popper 2, but it seems that it's trying to install popper 1.

    bootstrap 5 beta 2 is out, and they've indicated it's pretty close to final. Can you bump all the dependencies please?

  • 10

    Bump sass-loader from 10.0.5 to 10.1.1

    Bumps sass-loader from 10.0.5 to 10.1.1.

    Release notes

    Sourced from sass-loader's releases.

    v10.1.1

    10.1.1 (2021-01-11)

    Bug Fixes

    • problem with resolving and the includePaths option (#913) (cadc75e)

    v10.1.0

    10.1.0 (2020-11-11)

    Features

    • allow the additionalData to be async (#902) (9d925ff)
    Changelog

    Sourced from sass-loader's changelog.

    10.1.1 (2021-01-11)

    Bug Fixes

    • problem with resolving and the includePaths option (#913) (cadc75e)

    10.1.0 (2020-11-11)

    Features

    • allow the additionalData to be async (#902) (9d925ff)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
    • @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

    Additionally, you can set the following in your Dependabot dashboard:

    • Update frequency (including time of day and day of week)
    • Pull request limits (per update run and/or open at any time)
    • Out-of-range updates (receive only lockfile updates, if desired)
    • Security updates (receive only security updates, if desired)
  • 11

    Auth page error

    An error in the log of the page "pages-sign-in.html" also signup page of your template is visible in the console log with the following stack trace: link : https://demo.adminkit.io/pages-sign-up.html

    Uncaught TypeError: Invalid value used as weak map key
        at WeakMap.set (<anonymous>)
        at t.e.init (simplebar.esm.js:401)
        at new t (simplebar.esm.js:354)
        at HTMLDocument.<anonymous> (sidebar.js:6)
    

    this causes crashes in javascript sometimes. browser is the brand new chromium edge, tested also on google chrome same error "Invalid value used as weak map key"