ViteReactAdmin dashboard

arco-admin-template — Vite Admin dashboard Template

By hu-snail

A mid-to-back-office frontend template built on Vite and React, integrating Arco Design, react-router-dom v6, mockjs, and less, with internationalization, theme customization, and dark mode.

Open Source SiteDownload Source ZIP

Explore the design

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

1 previews
Author preview
Author-provided preview

Preview provided in the project README.

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

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-09-30View source

What stands out

A quick read of the recorded project description.

01

Built with Vite, developed in React and JavaScript

02

UI uses Arco Design, routing uses react-router-dom v6

03

Built-in mockjs mock data solution, styling uses less

04

Supports internationalization and customizable themes

05

Provides light/dark mode switching

06

Includes pages such as login, dashboard, resource, component examples, settings, and 404

Template Details

arco-admin-template is an open-source mid-to-back-office frontend template built with Vite, written in React and JavaScript, with the UI layer based on Arco Design, routing via react-router-dom v6, styling with less, and built-in mockjs for mock data. The template includes pages such as login, dashboard, resource, button component examples, settings, and a 404 page, and supports internationalization, customizable themes, and light/dark switching.

The project README states its purpose is primarily educational: practicing React Hook-related APIs, mastering Vite plugin mechanisms and build configuration, and learning the new features of react-router-dom v6. The documentation is marked as "work in progress," so before use you need to read the source code yourself to understand the directory structure and configuration approach.

Regarding the runtime environment, the README recommends Node version 12.0.0 or higher, and for local development Chrome 80+ is recommended; modern browsers are supported but IE is not. The repository uses the MIT license, allowing free use, modification, commercial use, and distribution of this version of the code, provided the copyright notice and license notice are retained when distributing; third-party assets such as demo images, fonts, and icons need their licenses checked separately.

ViteReactAdmin

Is it right for your project?

Use Cases

  • Building the frontend foundation for a mid-to-back-office management system
  • Learning React Hooks, Vite build configuration, and react-router-dom v6 usage
  • As a starting point for an admin interface that needs internationalization or dark mode
  • Developing pages first with mockjs when there is no backend API

Suitable For

  • Frontend developers who need a React mid-to-back-office template
  • Learners who want to reference the combination of Vite and Arco Design
  • Teams planning to build admin interfaces on top of the template

Getting started & customization

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

  1. 1

    The README recommends Node version >= 12.0.0; for local development Chrome 80+ is recommended; IE is not supported

  2. 2

    Install dependencies with yarn install, run development with yarn dev, build with yarn build, and preview locally with yarn preview

  3. 3

    The project documentation is marked as work in progress; refer to the source code to understand the specific configuration

  4. 4

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

  5. 5

    When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice

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 mean external services or third-party assets are free.

Must comply with when using

  • Free use, modification, commercial use, and distribution of this version of the 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

  • Browser compatibility limitations: IE is not supported; for local development Chrome 80+ is recommended; only modern browsers are supported.
  • The project documentation is not yet complete; the README is marked as "work in progress," so before use you need to read the source code yourself to understand the directory structure and configuration approach.
  • The README contains a donation request, which is voluntary and does not affect the free use of the code.
  • 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 domains, hosting, databases, payments, or AI may incur additional charges.
View Original Text Basis

Permission is hereby granted, free of charge

Original License Text

本地开发推荐使用`Chrome 80+` 浏览器 支持现代浏览器, 不支持 IE

Original README

## 文档 正在编写中......

Original README

如果你觉得这个项目对你有帮助，你可以帮作者买一杯咖啡表示支持!

Original README
https://github.com/hu-snail/arco-admin-template/blob/master/LICENSEhttps://github.com/hu-snail/arco-admin-template/blob/master/README.md

Compiled by DeepSeek based on repository license and README ·2026-09-30. 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 · 77 / 100
Technologies
Vite · React
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
2022-05-06
Screenshot last checked
2026-09-30

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 Vite 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.

Automatically checked against source and license rules; no manual editorial review.

Inspect the recorded source material

SHA-256: 6fc17c22d3ea5f58f85c55a12a8d8b0d392d432a3eec29e3894a12110b68f634

2026-09-30T09:33:55.732Z

Source file / repository
<div align="center"><img height="120px" src="https://github.com/hu-snail/arco-admin-template/blob/master/src/assets/logo/logo.svg"/></div>

<h1 align="center">Arco admin template</h1>

## 简介

`Arco-admin-template`是一个免费开源的中后台模板你，使用了`React17`、`vite2`、`react-router-dom v6`、`less` 等主流技术开发，开箱即用的中后台前端解决方案。

项目目的：

- 学习`React Hook`相关 Api
- 掌握`Vite2`插件机制、构建配置
- 学习 `Ract-router-dom v6`新特性

## 特性

- 技术栈：React17/React-router-dom v6/vite2
- Javascript 版本
- 可自定义主题
- 国际化方案
- Mock 数据方案
- 暗夜模式
- Arco Design UI 库

## 文档

正在编写中......

## 准备

- `Node`: 版本建议 >= 12.0.0 [下载链接](https://nodejs.org/zh-cn/download/)
- `Git`: [版本管理工具](https://www.git-scm.com/download)
- `Visual Studio Code`: [最新版本](https://code.visualstudio.com/Download/)
  - [Eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)- 脚本代码检查
  - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - 代码格式化
  - [Stylelin](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint) - css 格式化

## 安装使用

- 获取代码

```sh
git clone https://github.com/hu-snail/arco-admin-template.git
```

- 安装依赖

```sh
yarn install
```

- 运行

```sh
yarn dev
```

- 打包

```sh
yarn build
```

- 本地预览

```sh
yarn preview
```

## 预览截图
- 登录页
<img src="https://github.com/hu-snail/arco-admin-template/blob/master/src/assets/screenshot/login.png"/>

- 仪表盘
<img src="https://github.com/hu-snail/arco-admin-template/blob/master/src/assets/screenshot/work.png"/>

- 资源
<img src="https://github.com/hu-snail/arco-admin-template/blob/master/src/assets/screenshot/res.png"/>

- 按钮组件
<img src="https://github.com/hu-snail/arco-admin-template/blob/master/src/assets/screenshot/comp-btn.png"/>

- 设置
<img src="https://github.com/hu-snail/arco-admin-template/blob/master/src/assets/screenshot/setting.png"/>

- 404
<img src="https://github.com/hu-snail/arco-admin-template/blob/master/src/assets/screenshot/500.png"/>

## 浏览器支持

本地开发推荐使用`Chrome 80+` 浏览器

支持现代浏览器, 不支持 IE

## 维护者

[@hu-snail](https://github.com/hu-snail/)

## 捐赠

如果你觉得这个项目对你有帮助，你可以帮作者买一杯咖啡表示支持!

<div style="display: flex; justify-content: space-between;"><img  width="48%" src="https://gitee.com/hu-snail/vue3-admin-element-template/raw/master/src/assets/zfb.jpeg"/></div>

## License

[MIT © hu-snail-2021](https://github.com/hu-snail/arco-admin-template/blob/master/LICENSE)
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

kiaalap

kiaalap

Kiaalap is a free, open-source admin template from Colorlib for education, online courses, and school management.

Vite · Admin dashboard

react-vite-admin

react-vite-admin

A backend management starter built on Vite and React, integrating Recoil, React Query, TypeScript, and Axios, with Ant Design-style interface screenshots. Suitable as a starting point for management-side projects, licensed under MIT, with Chinese documentation and common scripts.

Vite · Admin dashboard

admin-antd-react

admin-antd-react

A Vite + React 18 admin template using Ant Design and Recoil, with login, logout, and registration flows; page, button, and permission configuration verification; internationalization; dynamic sidebar and breadcrumbs; Svg Sprite icons; Mock data; and list, form, and detail page examples.

Vite · Admin dashboard

super-admin

super-admin

A React, Vite, and Antd admin template that implements multi-tab route caching similar to Vue keepalive and route-based permission control.

Vite · Admin dashboard

react-vite-tailwind-typescript-firebase-auth-template

react-vite-tailwind-typescript-firebase-auth-template

A starter template for backend applications using Vite, React, TypeScript, TailwindCSS, and Firebase Auth, featuring login and dashboard interfaces. Requires your own Firebase project and credentials in .env; no backend logic included.

Vite · Admin dashboard

saasboard

saasboard

SaaSBoard is an open-source SaaS admin dashboard template from MekuHQ, built with React, Vite, and Tailwind CSS. It provides pages for Tools, Reports, Billing, Settings, and Support, along with shared components such as Sidebar, Layout, and Topbar.

Vite · Admin dashboard