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. See 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
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 | |
1 Plugin | |
1 Color Scheme | |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Can't use links in top navbar's notification dropdown
The system dropdown notifications (on the top navbar) break when inserting a link.
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 frommark as read
, it works fine.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:
table
element and use classtable
Your Environment 🌎
Screenshots 📷
Not available, this can only be checked on active screen
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.
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:
Your Environment 🌎
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):
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:Expected Behavior 🤔
The project should correctly start with
npm start
Steps to Reproduce 🕹
Steps:
npm i
npm start
Your Environment 🌎
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
to4.9.1
solves it for me.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.
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
Here's the error:
In Yarn 1:
Add to YarnPkg.com
I'd love to be able to install this with
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.
babel/traverse, popper installation issues
git clone .. followed by npm install gives this error:
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?
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.
Changelog
Sourced from sass-loader's changelog.
Commits
955b863
chore(release): 10.1.1cadc75e
fix: problem with resolving and theincludePaths
option (#913)4caf60f
chore(release): 10.1.09d925ff
feat: allow theadditionalData
to be async (#902)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 readmeAdditionally, you can set the following in your Dependabot dashboard:
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
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"