VueViteAdmin dashboard

stepin-template — Vue Admin dashboard Template

By stepui

A mid-to-back-office frontend template based on Vue and Vite, integrating Ant Design Vue and Tailwind CSS, with built-in theme customization, multi-tab, and permission control.

Open Source SiteDownload Source ZIP

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

1 previews
Desktop homepage
Desktop captureTop of page

Actual screenshot captured by the server browser.

One original preview is available. Open the full image to inspect the design.

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-08View source

What stands out

A quick read of the recorded project description.

01

Based on Vue and Vite, integrating Ant Design Vue and Tailwind CSS

02

Supports theme customization with real-time dynamic switching

03

Built-in multi-tab functionality

04

Built-in permission control, compatible with ABAC and RBAC models

05

Provides built-in business components and common page templates

Template Details

Stepin Template is a mid-to-back-office frontend template whose tech stack is Vue and Vite, integrating Ant Design Vue and Tailwind CSS. It originates from the Vue3 version of Vue Antd Admin. The repository uses the MIT license, allowing free use, modification, commercial use, and distribution; when distributing, copyright and license notices must be retained.

The template provides theme customization with real-time switching, multi-tab, permission control (compatible with ABAC and RBAC models), as well as several built-in business components and common page templates. The README specifies environment requirements: git ^2.15.0, node ^16.14.0, yarn ^1.21.1; browser support covers the latest two versions of Edge, Firefox, Chrome, Safari, and Opera.

The usage flow is to clone the repository, run yarn install to install dependencies, and run yarn dev to start; the console outputs the local access address. Third-party assets such as demo images, fonts, and icons must be checked against their respective licenses. External services such as domain names, hosting, databases, payments, or AI may incur additional charges.

VueViteAdmin

Is it right for your project?

Use Cases

  • Building the frontend interface of a mid-to-back-office management system
  • Backend projects requiring a multi-tab workflow
  • Admin-side applications requiring role- or attribute-based access control
  • Backend frontend development aiming for unified themes and styles

Suitable For

  • Teams developing mid-to-back-office systems using the Vue tech stack
  • Backend projects requiring permission control and multi-tab
  • Developers who want to build on an existing template for secondary development

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

  1. 1

    Environment requirements: git ^2.15.0, node ^16.14.0, yarn ^1.21.1

  2. 2

    After cloning the repository, run yarn install to install dependencies

  3. 3

    Run yarn dev to start; the console will output the local access address

  4. 4

    Third-party assets such as demo images, fonts, and icons must be checked against their respective licenses

  5. 5

    External services such as domain names, hosting, databases, payments, or AI may incur additional charges

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version under the MIT license in the public repository; the free scope is the code of this version and does not imply that external services or third-party assets are free.

Must comply with when using

  • Free use, modification, commercial use, and distribution of this version's code are permitted.
  • When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
  • The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

  • Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses; they cannot be judged solely by the code's MIT license.
  • External services such as domain names, hosting, databases, payments, or AI may incur additional charges.
  • Participating in community communication requires joining a designated QQ group (group number 441231578); this is an optional community support channel, not a mandatory requirement for using the template.
  • The README provides an entry for tipping the author (Alipay/WeChat payment QR codes); this is voluntary donation and does not affect the free use of the template.
View Original Text Basis

Permission is hereby granted, free of charge

Original License Text

加入社群，与小伙伴们一同交流心得。QQ 群：441231578

Original README

如果该项目对您有所帮助，可以请作者喝一杯咖啡。

Original README
https://github.com/stepui/stepin-template/blob/main/LICENSEhttps://github.com/stepui/stepin-template/blob/main/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-08. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms
GitHub
Documentation and maintenance reference score
More documented · 81 / 100
Technologies
Vue · Vite
Website type
Admin dashboard
How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded
2024-08-12
Screenshot last checked
2026-10-08

A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.

The catalog identifies Vue as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Review declaration: [email protected] · 2026-10-08

Inspect the recorded source material

SHA-256: 173687b568cef4a9bc88043380c6b6fcb765953d85b1ced7da08bdc8b360fe33

2026-10-08T12:36:42.041Z

Source file / repository
<h1 align="center">Stepin Template</h1>

<div align="center">

开箱即用的中后台前端/设计解决方案
<br/>
(原[ Vue Antd Admin](https://github.com/iczer/vue-antd-admin/) Vue3 版本)

![GitHub package.json version (subfolder of monorepo)](https://img.shields.io/github/package-json/v/stepui/stepin-template)
![GitHub repo size](https://img.shields.io/github/repo-size/stepui/stepin-template)
![GitHub last commit](https://img.shields.io/github/last-commit/stepui/stepin-template)
![GitHub release (latest by date)](https://img.shields.io/github/v/release/stepui/stepin-template)
![Docs by iczer](https://img.shields.io/badge/docs%20by-iczer-green)

![preview](./docs/images/preview.png) 

</div>

简体中文 | [English](./README-en_US.md)

- 预览地址: https://stepin-template.pages.dev
- 使用文档: https://docs.stepin-template.pages.dev
- 常见问题: https://docs.stepin-template.pages.dev/issue
- 国内镜像: https://gitee.com/stepui/stepin-template

## 特性

- 强大的主题定制功能，实时动态切换
- 多页签功能，助力后台管理高效开发
- 内置权限控制，兼容 ABAC 和 RBAC 模型
- 丰富的内置业务组件和常用页面模板

## 浏览器支持
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera |
| --- | --- | --- | --- | --- |
| last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
## 环境要求

|git|node|yarn|
|---|----|----|
|`^2.15.0`|`^16.14.0`|`^1.21.1`|

## 使用

### 拉取代码

```sh
git clone https://github.com/stepui/stepin-template.git
```

### 安装依赖

```sh
yarn install
```

### 启动

```sh
yarn dev
```

### 预览

启动成功后，控制台会显示本地访问地址：http://127.0.0.1:5173，浏览器打开即可预览。

更新多信息请参考 [使用文档](http://stepui.gitee.io/stepin-template-docs/)

## 参与贡献

我们非常欢迎你的贡献，你可以通过以下方式和我们一起共建 :star2:：

- 在你的公司或个人项目中使用 Stepin Template。
- 通过 [Issue](https://github.com/stepui/stepin-template/issues/new) 报告:bug:或进行咨询。
- 提交 [Pull Request](https://github.com/stepui/stepin-template/pulls) 改进 Stepin Template 的代码。
- 加入社群，与小伙伴们一同交流心得。QQ 群：441231578

## 打赏作者
如果该项目对您有所帮助，可以请作者喝一杯咖啡。
<p>
  <img src="./docs/images/alipay.png" width="320px" style="display: inline-block; border-radius: 8px;" />
  <img src="./docs/images/wechatpay.png" width="320px" style="display: inline-block; margin-left: 24px; border-radius: 8px;" />
</p>
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

vuestic-admin

vuestic-admin

Vuestic Admin is an open-source Vue 3 admin template maintained by Epicmax, built on Vuestic UI with Vite, Pinia, and Tailwind CSS. It provides a ready-to-run dashboard with a dark theme, global configuration, i18n internationalization, and responsive layout.

Vue · Admin dashboard

v3-admin-vite

v3-admin-vite

v3-admin-vite is an AI-friendly Vue3 admin template built on Vue3, Vite, TypeScript, and Element Plus. It keeps a lean structure with detailed comments, supports backend-controlled dynamic route permissions, page-level and button-level permissions, multiple themes and layouts, and mobile compatibility.

Vue · Admin dashboard

vue-typescript-admin-template

vue-typescript-admin-template

A Vue 2.6 + TypeScript + Element UI admin template ported from vue-element-admin, offering type safety and enterprise features like permission authentication, internationalization, dynamic themes, editors, charts, Excel/PDF handling, and PWA support.

Vue · Admin dashboard

vue-antd-admin

vue-antd-admin

Vue Antd Admin is the Vue implementation of Ant Design Pro, providing an out-of-the-box front-end and design solution for admin dashboards.

Vue · Admin dashboard

coreui-free-vue-admin-template

coreui-free-vue-admin-template

CoreUI's official free Vue admin template, MIT licensed, built on Vue 3 and the CoreUI component library with Vue Router, Pinia, and Vite.

Vue · Admin dashboard

nova-admin

nova-admin

Nova Admin is an admin template built on Vue3, Vite, TypeScript, and Naive UI, with Unocss for styling.

Vue · Admin dashboard