Metis (puikinsh/Bootstrap-Admin-Template): a free Bootstrap 5 admin dashboard built on Vite

What Metis actually is, and the problem it removes

Metis is the modern rewrite of the puikinsh/Bootstrap-Admin-Template repository, published as the npm package metis-admin-dashboard at version 3.6.0. The problem it removes is the first two weeks of an internal tool: the sidebar that collapses on mobile, the dark mode toggle that has to persist somewhere, the table with filtering and export, the sign-in form with inline validation. The repository's own description counts 30 pages including auth and error pages, and the README lists analytics, user management, product management, order management, file manager, calendar, messages, reports, settings, security and help pages.

The audience is narrow and worth naming. This is for a developer who is building an admin panel and has decided the front end should be plain HTML, SCSS and ES modules rather than React or Vue. If your team already has a component library and a design system, Metis is a competitor to your own work, not a shortcut. The homepage points at a live demo at preview.colorlib.com/theme/metis/, which is the fastest way to decide whether the visual language fits before you clone anything.

How the Vite build and the Alpine.js layer fit together

The architecture is visible in the top-level entries. Source lives in src-modern/, the build output in dist-modern/ (package.json sets "main" to dist-modern/index.html), static files in public-assets/, and build helpers in scripts/. Vite 8.2 handles the dev server and the production bundle, Sass 1.104 compiles the SCSS architecture, and PostCSS runs through postcss.config.js. There is no jQuery anywhere in the stack.

Interactivity comes from Alpine.js 3.17 rather than a virtual DOM framework. That choice is the whole personality of the project: state lives in HTML attributes, and the JavaScript you write is small and local. Charts come from ApexCharts 7.1, imported per chart type, and the README states that unused chart types stay out of the bundle. The README also states that scripts/utils/chart-palette.js is the single source for every chart colour, checked for lightness band, chroma floor, colour-blind separation and contrast in both themes. That is an unusual level of discipline for a free template, and it only pays off if you actually edit that file instead of hardcoding hex values in a chart config.

The third structural decision is the zero third-party runtime request claim from the v3.5.0 release notes. Fonts, charts, syntax highlighting and images are self-hosted, so the template runs offline and behind a strict CSP. For an admin panel on an internal network, that is a real constraint removed.

Installing Metis and running the dev server

The repository does not print an install section in the README excerpt, but package.json and .env.example together give the exact path. Copy the environment example first, because the Vite dev server reads VITE_PORT and VITE_HOST from it:

cp .env.example .env.local

The example file sets VITE_PORT=3000 and VITE_HOST=localhost, along with a VITE_API_URL placeholder pointing at http://localhost:3001/api. Nothing in the template calls that URL yet; it exists for the backend integration you will write.

Install dependencies and start Vite with the scripts declared in package.json:

npm install
npm run dev

You should see the Vite dev server start on port 3000, with hot module replacement enabled as the README describes. To produce the static output that package.json points at, run the build script:

npm run build
npm run preview

The build writes to dist-modern/, and npm run preview serves that directory so you can check the production bundle before deploying it. There is also a combined npm run serve script that runs the build and the preview in one command. If you only want to lint or format, package.json declares npm run lint for eslint src-modern/ and npm run format for Prettier.

Where Metis stops and your backend has to start

The README calls this a template, and the package description calls it a template, and both are being honest. There is no server in this repository. The .env.example file carries VITE_ENABLE_DEMO_DATA=true and VITE_ENABLE_MOCK_AUTH=true, which tells you the data on the dashboard pages is demo data and the authentication is mocked. The auth pages are described in the README by their interface behaviour: inline validation, password reveal, a live strength meter, confirmation states for password reset, a six-box code entry for two-step verification with paste-a-whole-code and a resend cooldown. Those are UI states. Nothing in the repository describes a session store, a token refresh flow or a route guard.

That is the failure mode to plan for. If you deploy Metis and point it at a real API without writing the auth layer yourself, you have a login screen that does not log anyone in. The same applies to the CRUD pages: user management, product management and order management are front-end views over demo data, and the README does not document a data layer behind them.

The second limitation is subtler. VITE_API_URL and VITE_API_TIMEOUT are compile-time values in a Vite project, baked into the bundle at build time. If you need the same artifact to talk to different backends in staging and production, you will be rebuilding per environment rather than swapping a runtime config file. The README does not document an alternative.

Metis against CoreUI and the Tailwind-based alternatives

The obvious comparison is CoreUI Free Bootstrap Admin Template, which appears in the related searches and solves the same first problem: a Bootstrap admin shell you do not have to draw. The difference is the interaction model. CoreUI ships its own JavaScript component layer with a defined API for things like sidebars and dropdowns. Metis instead leans on Alpine.js, so behaviour is expressed as directives in the markup, and on Bootstrap 5.3.8 for everything Bootstrap already provides. If you have used neither, Alpine.js is the smaller thing to learn, because a directive is one attribute rather than a component registration.

The second comparison is the Tailwind-and-React group that the README itself promotes through DashboardPack, naming TailPanel as React, TypeScript, Tailwind CSS and Vite. That is a different trade. TailPanel gives you a component model and typed props; Metis gives you HTML files you can open in an editor and understand without a build step for the markup. The repository's own package.json keywords list html-template, which is the accurate label. If your team's answer to "where does this button live" is a component file, Metis will feel backwards. If the answer is an HTML file, it will feel direct.

Maintenance, licence and what an upgrade costs

The repository is not archived, and the last push was on 2026-09-21, days before this writing. The release cadence shown in the release notes is roughly monthly across 2026: v3.4.3 in April with an accessibility pass covering Lighthouse contrast, heading order and button name; v3.5.0 in August with zero third-party requests and advisories patched; v3.6.0 in September with nine new auth and error pages, a rebuilt neutral design system and ApexCharts 7. That is a template being actively worked on, and the CHANGELOG.md at the repository root is where the full list lives.

The upgrade cost is the part worth thinking about before you start. Metis is a template, which means the usual pattern is that you copy it and edit it in place. Once you have edited the SCSS and the markup, you no longer have a clean merge path to v3.7.0 or v4. The v3.6.0 release rebuilt the neutral design system and validated the chart palette, which is exactly the kind of change that will conflict with local colour edits. If you plan to track upstream, keep your changes in new files and in the palette file rather than scattered through the templates.

The licence is MIT, per LICENSE.md and the package.json "license" field. In practical terms that permits commercial use and modification, and the repository's own README links the MIT badge on opensource.org. It does not give you the premium templates advertised in the README, which are separate products from DashboardPack. Consult your own counsel on attribution and notice requirements rather than treating this paragraph as advice.

What to verify before you commit to Metis

Check the Node requirement first. The README badges Node.js 20.19+ and the repository carries an .nvmrc file, so if your build image is pinned to an older LTS you will find out at npm install rather than at review time. Vite 8.2 is the build tool, and the README describes it as rolldown-powered, which is a newer bundler than the Rollup-based Vite most teams have in their lockfiles.

Second, open scripts/utils/chart-palette.js and confirm it covers the chart types you need. The README presents it as the single source for every chart colour, validated for lightness band, chroma floor, colour-blind separation and contrast in both themes. If your product needs a categorical palette larger than the one defined there, you are extending a validated system, and the validation no longer holds for your additions.

Third, decide where your backend boundary sits. The .env.example gives you VITE_API_URL and VITE_API_TIMEOUT and nothing else, so the contract between this template and your API is yours to define. The README does not document a data-fetching convention, a state store or a form submission pattern beyond the UI states on the auth pages.

Editorial conclusion

Adopt Metis if you want a Bootstrap 5 dashboard shell you can rebuild with npm run dev and npm run build, and you are willing to supply your own backend behind the VITE_API_URL placeholder. Do not adopt it if you expect working authentication, persistence or a REST API out of the box: the repository ships .env.example with VITE_ENABLE_MOCK_AUTH=true, and the README describes the auth pages as UI. Before committing, check the Node version in .nvmrc against your CI image and confirm that the chart colours you need are present in scripts/utils/chart-palette.js, since every chart colour is meant to come from that one file.

Frequently asked questions

Official sources

1. License: MIT
2. Project website
3. puikinsh/Bootstrap-Admin-Template on GitHub
4. README
5. Releases