Vue Vben Admin is a free and open-source middle-and-back-end admin dashboard template built on Vue 3, Vite, TypeScript, and Shadcn UI, maintained by @Vben on GitHub. It delivers a ready-to-run front-end solution for management consoles, complete with theming, internationalization, and route-based permissions.
What is Vue Vben Admin?
Vue Vben Admin is a full-featured admin panel starter project. As input it takes a codebase cloned from GitHub; as output it produces a running admin front-end with login, dashboard, and management pages. The template uses Vue 3, Vite, TypeScript, Shadcn UI, and a monorepo structure, and is released under the MIT license. The current release is version 5.0, which is not compatible with earlier versions; the older code lives on the v2 branch.
Key Features
- Modern technology stack — Built with Vue 3, Vite, TypeScript, and Shadcn UI in a monorepo layout, using Tailwind CSS v4.0 for styling.
- Theme customization — Multiple theme colors with customizable options for branding.
- Internationalization — Built-in i18n support for multilingual admin interfaces.
- Dynamic route permissions — Permission system based on dynamic route generation, so access control is tied to routes.
- Free and open source — MIT-licensed with an active contributor community and a public changelog.
- Development experience — Includes a Gitpod one-click setup, a documentation site at doc.vben.pro, and CI/CD workflow badges for build, deploy, and code quality.
Who is it for?
- Front-end developers — who need a production-ready admin panel and want to avoid building auth, routing, and layout from scratch.
- Full-stack teams — that need a configurable front-end for a custom back-end, with permission hooks for role-based routing.
- Vue learners — who can study a real-world Vue 3 + Vite + TypeScript codebase, including monorepo conventions and commit message standards.
What can you do with it?
- Launch an admin dashboard quickly — clone, run pnpm install, then pnpm dev to get a local dev server with hot reload.
- Use the online preview — visit vben.pro and sign in with the test account vben/123456 to explore the full UI.
- Customize the look and language — change theme colors and enable internationalization via the built-in settings.
How does it work?
- Clone the repository from GitHub.
- Install dependencies with pnpm after enabling corepack.
- Run pnpm dev for development or pnpm build for production output.
The template ships with a set of pages and components ready to be adapted.
Pros and cons
- Pros: free and MIT-licensed, active development, modern Vue 3 tooling, and documentation at doc.vben.pro.
- Cons: version 5.0 is a major rewrite that is not compatible with previous versions; it also targets modern browsers only (Safari 16.4+, Chrome 111+, Firefox 128+) and does not support IE.
FAQ
Is Vue Vben Admin free?
Yes. Vue Vben Admin is free and open source, released under the MIT license. You can use it in commercial projects and modify the code as needed.
What browsers does Vue Vben Admin support?
It uses Tailwind CSS v4.0, which targets Safari 16.4+, Chrome 111+, and Firefox 128+. Internet Explorer is not supported, and the project recommends keeping browser versions current.
How can I run the project locally?
Clone the repository, then run npm i -g corepack, pnpm install, and pnpm dev. A full setup appears in the README, and a Gitpod button opens a ready-to-code online workspace.
Is there a live demo?
Yes, a full Chinese-language demo is hosted at vben.pro. The test login credentials are vben/123456.
How can I contribute?
Contributors can fork the repository, create a feature branch, commit changes, and submit a pull request. The project follows the Conventional Commits style with Angular-inspired commit types such as feat, fix, style, perf, and refactor.
