adminkit / adminkit

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.

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. Open 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

• Clone this repo git clone https://github.com/adminkit/adminkit.git
• Download from GitHub
• Download from Website

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	Firefox	Chrome	Safari	iOS Safari
last version	last 2 versions	last 2 versions	last 2 versions	last 2 versions

Resources

• Demo
• Website
• Documentation
• Support
• Affiliate Program

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

adminkit's Issues

Custom variables in a different directory

I've installed admitkit via yarn, so that it's downloaded into node_modules and I don't have to check it into my repository.

My webpack.config.js file is at the root, and contains

    .addEntry('adminkit', './node_modules/adminkit/src/js/app.js')

I'm trying to figure out how to customize the variables in _custom.scss without modifying files in the node_modules directory:

// Variables
@import "1-variables/variables";
@import "1-variables/custom";

What I think I want to do is create a 1-variables/_custom.scss in my /asset/styles directory (which is checked into source control), and then set webpack to first check my directory for a matching filename, and use it if it exists.

This is further complicated by the fact that I'm using Webpack Encore (a wrapper to simplify Webpack), and that I really don't know what I'm doing. I'm learning a lot by looking at your code, it's clean and elegant, and I'm quite pleased to be using it.

I realize this is more a webpack question than admitkit, this is what I was asking in another issue about documenting integration. I'm working on a Symfony bundle that uses adminkit and integrates some core functionality like creating the sidebar menu.

Thanks.

Feature Request: Site wide dark mode

Would it be possible to add a site wide dark mode option?

plans to make js turbo-compatible

hello,
thanks for providing this product, I'm almost positive it will be used in our next open source product, however it doesn't seems to be hotwire-turbo compatible, are there any plans in this regard? thanks

app.js throws console error when opening a collapsible menu item

Current Behavior 😯

When I open a menu item as a user, a console error shows up in DevTools.

Expected Behavior 🤔

No console error shows up.

Steps to Reproduce 🕹

1. Open a collapsible menu item.

Your Environment 🌎

• Browser: Chrome (v97.0.4692.99)
• OS: Windows 10
• Screen size: 1920x1080

Screenshots 📷

HTML of the item being clicked:

Console error:

Javascript line that throws the error:

css, charts and maps does not work when integrated with the react in dev mode

css, charts, and maps do not work when integrated with the react in dev mode

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.

toggle button

I have converted it in jsx react the toggle button doesn't work

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

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:

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

More example pages for projects

Is it possible to add some more example pages for projects? Like https://appstack.bootlab.io/pages-projects-detail.html for example.

Problem with turbolinks

I am using adminkit for my Rails project.
I use turbolinks and have a problem:

Ghi.Man.hinh.2021-10-28.luc.09.52.48.mov

Do you think this is a problem?
I'd be happy to create a PR to fix it.

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:

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:

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.

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"

Update dependencies

Hello.
I purchased the adminkit and have been using it in a project for some time, but it has many project dependencies that are out of date. I'm having trouble performing the update, especially for packages that have a major version available, thus having breaking changes when updating.
I would like to know if they could launch a feature with these updates and make them available, at least for those who purchased a license?

I'm sorry for my english.

possible to run adminkit as a standalone app?

like those with electronjs, instead of using a browser? thanks!

Alert is showing every page "mil"

After integrating adminkit to my project, an alert which has "mil" is showing every page.
I searched it on a code, like this alert("mil"), but there is no result,

Feature Request: Horizontal Menu Demo

Implementation of horizontal menu like this

can't open dropdown menu while js is activated

Hi, i tried to apply your template to my project but when i tried to call the js, dropdown menu on header didn't show properly. If I didn't call the js, the dropdown back to normal, but the sidebar toggle can't be clicked and did't show

Any updates coming soon?

Is there any updates in the pipe?

Disabled buttons overlap with input when in an input-group

When using an input-group with a disabled button, the border of the input overlaps with the button because the button is set to opacity: 0.65 and margin-left: -1px

Current Behavior 😯

A border overlaps.

Expected Behavior 🤔

The border shouldn't overlap.

Steps to Reproduce 🕹

Use the following HTML:

<form method="post">
    <div class="input-group">
        <input class="form-control" type="text">
        <button type="submit" class="btn btn-danger" disabled>Delete</button>
    </div>
</form>

Screenshots 📷

Private npm package for PRO

Summary 💡

We would love if you could add an private package for the PRO version, currently we have to add the source code of adminkit to our project and build it.
Maybe there is already one and we don't found the documentation ?
We only found the package [removed] which is public, so i guess it's not offical :)

Motivation 🔦

If we have to add adminkit source code to our code we blow up project.
Also it would be more easier to maintaince the theme, just update the version in the package.json and build it again.

Misplaced align when using d-xx-block on tables

When I use class "d-none d-md-block" in a table the lines the misplaced align. See screenshot below. Tried Safari, Chrome and Edge browsers on desktop and Safari on iOS, all with the same issue.

<table class="table table-striped">
	<thead>
		<tr>
			<th>Namn</th>
			<th>Kontotyp</th>
			<th>Status</th>
			<th class="d-none d-md-block text-end">Senaste inloggning</th>
			<th class="text-end">&nbsp;</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Andreas Persson</td>
			<td><span class="badge badge-secondary-light">Administratör</span></td>
			<td><span class="badge badge-success-light">Aktiv</span></td>
			<td class="d-none d-md-block text-end">2021-03-19 13:37</td>
			<td class="table-action text-end">
				<a data-bs-toggle="offcanvas" href="#edituser" role="button" aria-controls="edituser" onclick="document.getElementById('eu-name').focus();"><i class="align-middle" data-feather="edit-2"></i></a>
				<a href="#"><i class="align-middle" data-feather="lock"></i></a>
				<a href="#"><i class="align-middle" data-feather="trash"></i></a>
			</td>
		</tr>
	</tbody>
</table>

Running AdminKit 3.0.2

Poor page rendering

1. Page renders text. No icons.
2. Icons finally load and all text shift right to fit icons.

Upgrade to Bootstrap 5 beta 1

Hi, Bootstrap 5 beta 1 already released, please update it,thx!

performance improvement

I like this template, thanks to your great job!

traditional frontend solutions usually got a mediocre performance, and I am sensitive to that. so I forked this project and transformed it into a single-page application with pm.js to manage the page content. The performance was greatly improved. If necessary, you can refer to pm.js and 3rdrepo/adminkit

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.

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.

RTL Suport

Not support RTL

Is this project alive?

Is this project still alive? The last commit was from 08/2022!

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):

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

Document Webpack configuration

I'm much more of a server-side developer, so I might be confused about how themes like this are supposed to be installed. Specifically, I use Symfony and webpack encore, which simplifies configuring the front-end assets (https://symfony.com/doc/current/frontend.html)

What I think I want is a process like this:

• yarn add bootstrap@next, @popperjs/core, adminkit/adminkit, etc.
• in app.js, add require('~adminkit'); (and bootstrap? Or is that included? )
• in app.scss, add @import("~adminkit"); app.js required app.scss, and the sass compiler then combines everything.

Absent a flow like this, I find myself copying more files than I think I should. I'm trying to avoid directly copying files into my project and committing them, but rather installing them so the latest upgrades are installed when I run yarn upgrade. And I don't want my project to store the minified files, when I deploy on heroku webpack and sass are run to create the appropriate file.

Obviously, I'm talking about the js and css files only -- the HTML files need to be refactors as twig or view for the specific application, and those are checked in.

AdminLTE has a cool companion bundle (AdminLTEBundle) that put some of the widgets into macros that could easily generate the twig. I've thought about doing something like that with the bundle I'm working on, but something about the way I'm installing the assets seems wrong.

Demo site is down

At the moment, neither demo works (e.g. https://demo-basic.adminkit.io/)

IE 10/11 Issues.

Hi,

There seems to be quite a few issues with IE 10/11 :

• Scrolling is not working in https://demo.adminkit.io/index.html
• Cards (panels) overlap the footer
• "Settings and Documentation" right-side bar does not overlap panels, but create a margin
  • it also docks over the scrollbar, unless mouse over, than jumps to the correct position
• Markdown Editor shows no icons on the toolbar buttons.
• ApexCharts not rendered at all (empty cards, only titles)

just to mention a few.

Since TWBS 4.5 is IE 10/11 compatible, is there any chance fixing those issues?

Thank you.

Feature Request: Right side aside (settings panel) in free version

I'm moving from AdminLTE to AdminKit, and previously used the collapsible settings on the right site as a place for my search form.

Would you consider adding the icons and structure for the aside like you have in the pro version, but only include the content of that settings panel in pro version?

That is, leave the settings content in pro, but not the settings panel html.

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?

Sidebar menu items exhibit "resizing" behavior

Current Behavior 😯

When making sidebar menu choices, you can visually see each menu item resize/redraw itself as the DOM is constructed.

Expected Behavior 🤔

I wouldn't expect to see any horizontal resizing of menu items

Feature Request: Searchfield in sidebar

Would it be possible to add a correctly styles and align searchfield to the sidebar?

Alerts missing

I can see that UI alerts are listed in the demo, but adding the CSS to my application, the .alert classes are not present.

free in rtl

hi . please show me how to can use rtl in free mode

[BUG] - the setting toggle covering the footer nav.

[BUG] the setting toggle covering the footer nav.

Describe the bug :

the setting toggle in the bottom right side of the HOME page, is covering the the footer nav menu.

how to reproduce the issue :

steps -

1. Go to The Home page - https://demo.adminkit.io/
2. Scroll down to the bottom.

Screenshot

Agular not compatable facing below issues

Angular version facing issues Uncaught SyntaxError: Cannot use import statement outside a module

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.

Check Vue Example

https://github.com/gentritabazi01/AdminKit-Vue-Example

Sidebar wrong collapse?

1. Open https://demo.adminkit.io/ on PC with full screen browser
2. Resize width of browser till side menu (sidebar) collapse
3. Click on sidebar-toggle button in top navigation
4. Sidebar shows up
5. Resize browser to full screen
6. Sidebar collapse <- it shouldn't? feature or bug?

Autocomplete

I'd really like to see a autocompleter for search with a JSON source providing a hash. Typeahead. Maybe incorporate autocomplete.js (https://github.com/TarekRaafat/autoComplete.js)?

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