# Free & Premium Bootstrap 5 Admin Template

Ready-made Bootstrap 5 dashboards, pages and components for your admin panel, in plain HTML, React or Next.js, without jQuery. Start with the free MIT-licensed version, or get PRO with 53 pages, 5 dashboards and 11 plugins.

Key facts:

- **What it is:** an admin dashboard template and UI component library on Bootstrap 5.3: ready-made pages, layouts and components, in three versions with the same pages and design: AdminKit for HTML (Bootstrap 5.3, HTML, Sass and plain JavaScript, built with Vite), AdminKit for React (React 19, TypeScript, Vite 8 and React Router 8) and AdminKit for Next.js (Next.js 16 App Router, React 19 and TypeScript). Current version: 4.1.0.
- **Editions (HTML version):** the free version has 20 pages (1 dashboard), 4 plugins and 2,015 Lucide icons. AdminKit PRO has 53 pages, 5 dashboards (Analytics Dashboard, E-Commerce Dashboard, CRM Dashboard, Crypto Dashboard and AI Analytics Dashboard), 11 plugins, 4,178 icons (2,015 Lucide icons and 2,163 Font Awesome icons), 3 sidebar color schemes, a compact sidebar and a settings panel.
- **React and Next.js versions:** AdminKit for React is a single-page app with React 19, TypeScript, Vite 8 and React Router 8; AdminKit for Next.js is a project on the Next.js 16 App Router, React 19 and TypeScript, exported as static files. Both use AdminKit's own React components on Bootstrap's markup and Sass (no react-bootstrap, no Bootstrap JavaScript, no jQuery). React: free 20 pages and 4 plugins, PRO 53 pages, 5 dashboards and 11 plugins. Next.js: free 20 pages and 4 plugins, PRO 53 pages, 5 dashboards and 11 plugins. Run `npm install` and `npm run dev`; `npm run build` writes `dist/` (React, served with a fallback to `index.html`) or `out/` (Next.js). Docs: [React](https://adminkit.io/react/docs/), [Next.js](https://adminkit.io/nextjs/docs/).
- **Frameworks:** the HTML version works with any front-end framework or back end. You use its Bootstrap markup and classes in JSX, Vue, Svelte or Angular templates, Blade, Django templates or ERB, and load its CSS and JavaScript once, without wrapper components. Setup guides: [React](https://adminkit.io/bootstrap/docs/frameworks/react/), [Next.js](https://adminkit.io/bootstrap/docs/frameworks/nextjs/), [Vue](https://adminkit.io/bootstrap/docs/frameworks/vue/), [Nuxt](https://adminkit.io/bootstrap/docs/frameworks/nuxt/), [Angular](https://adminkit.io/bootstrap/docs/frameworks/angular/), [SvelteKit](https://adminkit.io/bootstrap/docs/frameworks/sveltekit/), [Astro](https://adminkit.io/bootstrap/docs/frameworks/astro/), [Laravel](https://adminkit.io/bootstrap/docs/frameworks/laravel/), [Django](https://adminkit.io/bootstrap/docs/frameworks/django/), [Rails](https://adminkit.io/bootstrap/docs/frameworks/rails/), [Symfony](https://adminkit.io/bootstrap/docs/frameworks/symfony/) and [HTML](https://adminkit.io/bootstrap/docs/frameworks/html/).
- **Install the free HTML version:** `npm install @adminkit/core`, then `import "@adminkit/core/css";` and `import "@adminkit/core";`. Or from a CDN: `https://unpkg.com/@adminkit/core/dist/css/app.css` and `https://unpkg.com/@adminkit/core/dist/js/app.js`.
- **Install AdminKit PRO for HTML:** it is not on npm or a CDN. Download the source after purchase, build it with Node.js 24 (`npm install`, `npm run build`) and copy `dist/` into your project; then import `css/app.css` and `js/app.js` by relative path. See [Quick start](https://adminkit.io/bootstrap/docs/getting-started/quick-start/).
- **JavaScript (HTML version):** `js/app.js` is one self-contained script that works with a plain script tag or as an ES module import, and needs no init call. It sets up icons, the sidebar and scrollbars (in PRO also tooltips and popovers) in markup added later as well, so it works with single-page apps, Turbo, Livewire and Astro view transitions. Importing it during server-side rendering does nothing, and the package ships TypeScript declarations.
- **Server-rendered frameworks:** in Next.js, Nuxt and SvelteKit, import `@adminkit/core` after hydration (`useEffect`, a client-only plugin, `onMount`), because it changes the server-rendered markup (icons, scrollbars). The CSS imports normally.
- **Dark mode:** Bootstrap 5.3 color modes. `data-bs-theme` on the `html` element is `light` or `dark`; the navbar toggle also offers `auto` (follows the operating system) and stores the choice in `localStorage` as `adminkit_config_colorMode`. The optional `js/head.js` (`@adminkit/core/head`), loaded as a blocking script in the `head`, applies it before the first paint so there is no flash. `adminkit:themechange` fires on `document` when the colors change.
- **Charts and maps:** create them with the `adminkit.*` helpers shown in the docs, passing a function of the theme colors; they redraw in the new colors when the color mode changes. `window.theme` holds the current colors. In React and Next.js, the `ChartJs`, `ApexChart` and `VectorMap` components take the same kind of function as a prop.
- **Icons:** [Lucide](https://lucide.dev/icons/), written as an `i` element with `data-lucide="house"` and canonical Lucide names. `js/app.js` bundles only the icons the template pages use; import `@adminkit/core/dist/js/icons-all.js` (or load `js/icons-all.js`) for all 2,015 Lucide icons, or add icons to `src/js/modules/icons.js` and rebuild. AdminKit PRO also includes Font Awesome. See [Lucide icons](https://adminkit.io/bootstrap/docs/icons/lucide-icons/).
- **Plugins:** charts, maps, a date picker and custom scrollbars come bundled and themed for light and dark mode; AdminKit PRO adds more, such as advanced tables, a full calendar, a rich text editor and enhanced form inputs. Neither edition uses jQuery.
- **Customizing:** theme colors, fonts, spacing and the sidebar are Sass variables in `src/scss/1-variables/_app.scss` (dark mode in `_dark.scss`). The source builds with Vite: `npm run dev` for a dev server, `npm run build` for `dist/`. Pages are Handlebars templates in `src/pages/`. The React and Next.js versions use the same Sass in `src/scss/`.
- **Accessibility:** both editions target WCAG 2.2 AA in light and dark mode, and every template page is checked with axe in both modes. Animations respect `prefers-reduced-motion`.
- **How it differs from other Bootstrap admin templates:** the pages use Bootstrap's own components and classes, so Bootstrap knowledge applies directly. The same pages come in HTML, React and Next.js. Every page is checked for WCAG 2.2 AA in light and dark mode. No jQuery anywhere. AdminKit PRO is a one-time payment with lifetime updates for a tier of 1, 5 or 10 developers, not a yearly license per seat. Comparisons with Tabler, AdminLTE and CoreUI: https://adminkit.io/compare/.
- **AI pages (AdminKit PRO):** AI Analytics Dashboard, AI Chat and Prompt Library. They are markup pages with demo data, ready to connect to your own API.
- **Scope:** AdminKit is the front end of an admin interface. Authentication, permissions, databases, billing and API endpoints are application code you provide, in any back end (Rails, Laravel, Django, ASP.NET, Node.js and others).
- **Licenses and pricing:** the free versions are MIT-licensed, also for commercial use, on GitHub ([adminkit/adminkit](https://github.com/adminkit/adminkit), [adminkit/adminkit-react](https://github.com/adminkit/adminkit-react) and [adminkit/adminkit-nextjs](https://github.com/adminkit/adminkit-nextjs)); the HTML version is also on [npm](https://www.npmjs.com/package/@adminkit/core). AdminKit PRO is a one-time payment with lifetime updates, per version (HTML, React and Next.js, same price each): Hobby $59 (1 developer, 1 product), Company $399 (5 developers, unlimited products), Enterprise $699 (10 developers, unlimited products). The bundle covers all three versions: Hobby $79, Company $499, Enterprise $799 (58% less than buying them one by one). Hobby does not allow paying end-users (such as a paid SaaS product). 30-day money-back guarantee. See [Pricing](https://adminkit.io/pricing/).
- **Upgrading from 3.x:** `data-feather` becomes `data-lucide`, `css/light.css` and `css/dark.css` become one `css/app.css` with `data-bs-theme`, jQuery is removed and webpack is replaced by Vite. See the [changelog](https://adminkit.io/bootstrap/docs/getting-started/changelog/).
- **Markdown for agents:** every page on adminkit.io has a Markdown version: add `.md` to the URL (for example `/pricing.md` or `/bootstrap/docs/frameworks/react.md`; `/index.md` is the homepage) or send `Accept: text/markdown`. `/llms-full.txt` holds the full documentation in one file.
- **Links:** live demos at https://demo.adminkit.io/ (HTML PRO) and https://demo-mit.adminkit.io/ (free), https://react-demo.adminkit.io/ (React PRO) and https://react-demo-mit.adminkit.io/ (free), https://nextjs-demo.adminkit.io/ (Next.js PRO) and https://nextjs-demo-mit.adminkit.io/ (free). Support: support@adminkit.io.

## Demos

- [Demo 1: Analytics Dashboard](https://demo.adminkit.io/?colorMode=light)
- [Demo 2: Dark Mode](https://demo.adminkit.io/?colorMode=dark)
- [Demo 3: E-Commerce Dashboard](https://demo.adminkit.io/dashboard-ecommerce.html?colorMode=light) (PRO)
- [Demo 4: CRM Dashboard](https://demo.adminkit.io/dashboard-crm.html?colorMode=light) (PRO)
- [Demo 5: Crypto Dashboard](https://demo.adminkit.io/dashboard-crypto.html?colorMode=light) (PRO)
- [Demo 6: AI Analytics Dashboard](https://demo.adminkit.io/dashboard-ai.html?colorMode=light) (PRO)

## One design. Three stacks.

- [AdminKit for HTML](https://adminkit.io/bootstrap/): Plain HTML, Sass and JavaScript on Bootstrap 5.3. Works with any back end. Live preview: https://demo.adminkit.io/
- [AdminKit for React](https://adminkit.io/react/): Every page and component in React and TypeScript, ready to build your app on. Live preview: https://react-demo.adminkit.io/
- [AdminKit for Next.js](https://adminkit.io/nextjs/): A ready-to-run Next.js project in TypeScript, built on the App Router. Live preview: https://nextjs-demo.adminkit.io/

## Features

- Bootstrap 5.3, dark mode: Light and dark mode, or follow the system setting, on Bootstrap 5.3 without any jQuery.
- WCAG 2.2 AA accessible: Both editions target WCAG 2.2 AA in light and dark mode, and every page is tested for it.
- Framework guides: 12 setup guides, from React, Vue and Angular to Laravel, Django and a plain HTML project.
- Pages and dashboards: PRO has 53 pages with 5 dashboards, tables, forms and invoices; the free version has 20.
- AI pages: PRO adds AI Analytics Dashboard, AI Chat and Prompt Library, ready to connect to your own API.
- Easy to restyle: Change colors, fonts and layout in a few Sass variables, or restyle live with CSS variables.

Also included: Bootstrap 5.3, No jQuery, Vite build, Sass sources, CSS custom properties, WCAG 2.2 AA, Light, dark and auto modes, 3 sidebar color schemes, 53 HTML pages, 5 dashboards, 3 AI pages, 4,178 icons, Fully responsive, Offcanvas sidebar on mobile, Scroll and count-up animations, Reduced-motion support, Settings panel, Compact sidebar, 12 framework guides, Interactive charts, Advanced tables, Event calendar, Rich text editor, Searchable selects, Date pickers, Input masks, Drag and drop, Google Maps, Vector maps, Toast notifications, Form validation, Email support, Lifetime updates.

## Framework guides

- [React](https://adminkit.io/bootstrap/docs/frameworks/react/)
- [Next.js](https://adminkit.io/bootstrap/docs/frameworks/nextjs/)
- [Vue](https://adminkit.io/bootstrap/docs/frameworks/vue/)
- [Nuxt](https://adminkit.io/bootstrap/docs/frameworks/nuxt/)
- [Angular](https://adminkit.io/bootstrap/docs/frameworks/angular/)
- [SvelteKit](https://adminkit.io/bootstrap/docs/frameworks/sveltekit/)
- [Astro](https://adminkit.io/bootstrap/docs/frameworks/astro/)
- [Laravel](https://adminkit.io/bootstrap/docs/frameworks/laravel/)
- [Django](https://adminkit.io/bootstrap/docs/frameworks/django/)
- [Rails](https://adminkit.io/bootstrap/docs/frameworks/rails/)
- [Symfony](https://adminkit.io/bootstrap/docs/frameworks/symfony/)
- [HTML](https://adminkit.io/bootstrap/docs/frameworks/html/)

## What's included: Dashboards & Pages

- [Analytics Dashboard](https://demo.adminkit.io/)
- [Profile Page](https://demo.adminkit.io/pages-profile.html)
- [Invoice Page](https://demo.adminkit.io/pages-invoice.html)
- [Pricing Page](https://demo.adminkit.io/pages-pricing.html)
- [Error Pages](https://demo.adminkit.io/pages-404.html)
- [E-Commerce Dashboard](https://demo.adminkit.io/dashboard-ecommerce.html) (PRO)
- [CRM Dashboard](https://demo.adminkit.io/dashboard-crm.html) (PRO)
- [Crypto Dashboard](https://demo.adminkit.io/dashboard-crypto.html) (PRO)
- [AI Analytics Dashboard](https://demo.adminkit.io/dashboard-ai.html) (PRO)
- [AI Chat](https://demo.adminkit.io/pages-chat-ai.html) (PRO)
- [Prompt Library](https://demo.adminkit.io/pages-prompts.html) (PRO)
- [Settings Page](https://demo.adminkit.io/pages-settings.html) (PRO)
- [Tasks Page](https://demo.adminkit.io/pages-tasks.html) (PRO)
- [Calendar Page](https://demo.adminkit.io/calendar.html) (PRO)
- [Projects Page](https://demo.adminkit.io/pages-projects.html) (PRO)
- [Clients Page](https://demo.adminkit.io/pages-clients.html) (PRO)
- [Orders Page](https://demo.adminkit.io/pages-orders.html) (PRO)
- [Messages Page](https://demo.adminkit.io/pages-chat.html) (PRO)

## What's included: Plugins & Addons

- [Chart.js](https://demo.adminkit.io/charts-chartjs.html): Canvas charts
- [jsVectorMap](https://demo.adminkit.io/maps-vector.html): Vector maps
- [SimpleBar](https://demo.adminkit.io/): Custom scrollbars
- [Vanilla Calendar Pro](https://demo.adminkit.io/forms-advanced-inputs.html): Date and time pickers
- [Lucide](https://demo.adminkit.io/icons-lucide.html): 2,015 icons
- [ApexCharts](https://demo.adminkit.io/charts-apexcharts.html): Interactive charts (PRO)
- [Choices.js](https://demo.adminkit.io/forms-advanced-inputs.html): Select and multiselect inputs (PRO)
- [DataTables](https://demo.adminkit.io/tables-datatables-responsive.html): Sortable, searchable tables (PRO)
- [FullCalendar](https://demo.adminkit.io/calendar.html): Event calendar (PRO)
- [Inputmask](https://demo.adminkit.io/forms-advanced-inputs.html): Input masks (PRO)
- [Quill](https://demo.adminkit.io/forms-editors.html): Rich text editor (PRO)
- [SortableJS](https://demo.adminkit.io/pages-tasks.html): Drag and drop (PRO)
- [Font Awesome](https://demo.adminkit.io/icons-font-awesome.html): 2,163 icons (PRO)

## Pricing details

AdminKit PRO is sold per version (HTML, React, Next.js) or as a bundle of all three, as a one-time payment (not a subscription) with a 30-day money-back guarantee. Payments are handled by Lemon Squeezy (credit cards, PayPal and other wallets).

### AdminKit PRO Bundle

- Hobby — $79 (instead of $177): 1 developer, 1 product, 6 months premium support. No paying end-users allowed (not for paid SaaS products).
- Company — $499 (instead of $1,197): 5 developers, unlimited products, 12 months premium support, paying end-users allowed.
- Enterprise — $799 (instead of $2,097): 10 developers, unlimited products, 24 months premium support, paying end-users allowed.

### AdminKit PRO for HTML

- Hobby — $59: 1 developer, 1 product, 6 months premium support. No paying end-users allowed (not for paid SaaS products).
- Company — $399: 5 developers, unlimited products, 12 months premium support, paying end-users allowed.
- Enterprise — $699: 10 developers, unlimited products, 24 months premium support, paying end-users allowed.

### AdminKit PRO for React

- Hobby — $59: 1 developer, 1 product, 6 months premium support. No paying end-users allowed (not for paid SaaS products).
- Company — $399: 5 developers, unlimited products, 12 months premium support, paying end-users allowed.
- Enterprise — $699: 10 developers, unlimited products, 24 months premium support, paying end-users allowed.

### AdminKit PRO for Next.js

- Hobby — $59: 1 developer, 1 product, 6 months premium support. No paying end-users allowed (not for paid SaaS products).
- Company — $399: 5 developers, unlimited products, 12 months premium support, paying end-users allowed.
- Enterprise — $699: 10 developers, unlimited products, 24 months premium support, paying end-users allowed.

All PRO tiers include: access to all PRO components, source files and free lifetime updates.

## Free vs PRO

The same in HTML, React and Next.js.

| | AdminKit (free) | AdminKit PRO |
| --- | --- | --- |
| Pages | 20 | 53 |
| Dashboards | 1 | 5 |
| Plugins | 4 | 11 |
| Icons | 2,015 | 4,178 |
| Sidebar color schemes | 1 | 3 |
| Dark mode | Yes | Yes |
| AI features | No | Yes |
| Settings panel | No | Yes |
| Support | Community | Email |
| License | MIT | Commercial |

Full pricing table and FAQ: https://adminkit.io/pricing/

## FAQ

**Q: What is AdminKit?**

A: AdminKit is a Bootstrap 5 template for building admin panels and dashboards. It includes ready-made HTML pages, CSS and JavaScript, with layouts, forms, tables and charts you can customize for your application.

**Q: What is the difference between AdminKit Free and PRO?**

A: AdminKit Free has 20 HTML pages, including an analytics dashboard, under the MIT license. AdminKit PRO is the paid edition, with 53 HTML pages, 5 dashboards, 11 plugins, 3 AI pages, a settings panel and email support. Both have light and dark mode. See the [Free and PRO comparison](https://adminkit.io/#download) for the full breakdown.

**Q: Does AdminKit include a backend or working authentication?**

A: No. AdminKit provides frontend page designs, including sign-in and account screens. You connect them to your own backend or services for authentication, user permissions and data storage.

**Q: Can I use AdminKit for a paid SaaS product?**

A: Yes. For AdminKit PRO, choose a Company or Enterprise license; Hobby does not allow products with paying users. Company covers up to 5 developers and Enterprise up to 10. AdminKit Free also permits commercial use under the MIT license. See the [PRO license terms](https://adminkit.io/licenses/) for the full conditions.

**Q: Which version should I pick?**

A: Pick [React](https://adminkit.io/react/) or [Next.js](https://adminkit.io/nextjs/) when your app is built with it: you get ready-made components instead of HTML. Pick the [HTML version](https://adminkit.io/bootstrap/) for plain HTML or a server-rendered back end such as Laravel, Django or Rails. All three have the same pages and design, and the [bundle](https://adminkit.io/pricing/) covers all of them.

**Q: Does AdminKit work with Vue or Angular?**

A: Yes, with the HTML version. It is plain HTML, CSS and JavaScript on Bootstrap 5.3, without jQuery, so it works with any framework or back end. The [framework guides](https://adminkit.io/bootstrap/docs/frameworks/vue/) cover Vue, Nuxt, Angular, SvelteKit and Astro, and Laravel, Django, Rails and Symfony.

**Q: How is AdminKit different from Tabler, AdminLTE or CoreUI?**

A: AdminKit stays close to Bootstrap: its pages use Bootstrap's own components and classes, the same pages come in HTML, React and Next.js, every page is checked for WCAG 2.2 AA, and PRO is a one-time payment with lifetime updates. The [comparison pages](https://adminkit.io/compare/) put AdminKit next to Tabler, AdminLTE and CoreUI, fact by fact.

**Q: How do I change the colors, fonts and layout?**

A: In Sass. The theme colors, fonts, spacing and the sidebar are variables in `src/scss/1-variables/_app.scss`, dark mode in `_dark.scss`, so one change restyles every page when you rebuild. The [customization guide](https://adminkit.io/bootstrap/docs/getting-started/customization/) walks through it. PRO adds 3 sidebar color schemes and a settings panel to switch them.

---

Canonical HTML page: https://adminkit.io/

Site overview for agents: https://adminkit.io/llms.txt (expanded: https://adminkit.io/llms-full.txt) · Documentation: https://adminkit.io/bootstrap/docs/ · Questions: support@adminkit.io