Vite + React 18 + Ant Design + Recoil technology stack
ViteReactAdmin dashboard
admin-antd-react — Vite Admin dashboard Template
By lqsong
A Vite and React-based admin template using Ant Design components and Recoil state management, providing login, permission verification, internationalization, and various list/form/detail page examples.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Desktop homepage1 / 2
Desktop captureTop of page
Actual screenshot captured by the server browser.
All pages & views 2
Screenshots show visual appearance; interactive behavior may differ.
Recorded 2026-09-30View source
What stands out
A quick read of the recorded project description.
Provides login, logout, and registration flows
Supports three types of permission verification: page permissions, button operations, and permission configuration
Includes internationalization, dynamic sidebar, dynamic breadcrumbs, and Svg Sprite icons
Built-in Mock data and multiple page examples for lists, forms, and details
MIT license, allowing free use, modification, commercial use, and distribution of this version's code
Template Details
admin-antd-react is an admin frontend template maintained by lqsong. The current v2.0-vite branch uses Vite + React 18 + Ant Design + Recoil, while a separate v1.0-umijs branch is based on Webpack and UmiJS. The repository is released under the MIT license, allowing free use, modification, commercial use, and distribution of this version's code, but third-party assets such as demo images, fonts, and icons must be checked against their respective licenses.
The template covers login, logout, and registration flows, and provides three types of permission verification: page permissions, button operations, and permission configuration. Global features include internationalization, a dynamic sidebar supporting multi-level nested routes, customizable dynamic breadcrumbs, Svg Sprite icons, and Mock data. Comprehensive examples include a guide page, component examples (CKEditor, tui-editor, and IconSvg icons), and list, form, and detail page examples. List pages include standard list, table list, height-adaptive table, and search list; form pages include basic form and advanced form; detail pages include basic detail, module detail, and table detail.
Regarding usage limitations, the README explicitly notes that the online demo relies on an online mock service and is unstable; if online login fails, you can pull the project locally and run it directly to view it. For custom configuration, it is recommended not to modify .env.development and .env.production directly, but to copy them to .env.development.local and .env.production.local respectively before modifying the corresponding parameters. The project recommends using pnpm to install dependencies and provides scripts for development, production build, and optimizing svg icons.
ViteReactAdmin
Is it right for your project?
Use Cases
- Building an admin interface that requires login and permission control
- Referencing page organization for list, form, and detail pages
- An example project integrating Ant Design and Recoil in a React project
- Admin systems requiring internationalization and a dynamic routed sidebar
Suitable For
- Frontend teams developing admin systems with React and Ant Design
- Mid- and back-office projects requiring permission verification and multilingual support
- Frontend developers looking for reference Vite build configurations and Mock data solutions
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
Recommended dependency installation with pnpm: pnpm install
- 2
Start the development server: pnpm run dev
- 3
Production build: pnpm run build
- 4
Optimize svg icons: pnpm run svgo
- 5
For local or development mode, it is recommended to copy .env.development to .env.development.local before modifying parameters; for production mode, similarly copy .env.production to .env.production.local
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis 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
- The online demo relies on an online mock service and is unstable; if online login fails, the project must be pulled locally and run to view the demo.
- In local or development mode, do not modify .env.development directly; it is recommended to copy it to .env.development.local before modifying parameters.
- In production mode, do not modify .env.production directly; it is recommended to copy it to .env.production.local before modifying parameters.
- The project recommends using pnpm to install dependencies; you need to install and configure the pnpm environment yourself first.
- 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
**注意：Demo 用的是在线mock服务，不稳定，若在线登录不了pull到本地可直接运行查看demo**
Original README
本地或开发模式下，不要直接修改 '.env.development'
Original README
生产模式下，不要直接修改 '.env.production'
Original README
https://github.com/lqsong/admin-antd-react/blob/v2.0-vite/LICENSEhttps://github.com/lqsong/admin-antd-react/blob/v2.0-vite/README.md推荐使用 pnpm , **[pnpm的安装与使用](http://liqingsong.cc/article/detail/26)** 。
Original README
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 · 81 / 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
- 2023-01-03
- 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: 96bca3dfe917bc184d6e448241a9d955cb77e7f5109e785f3dd14169dc238c89
2026-09-30T09:27:32.851Z
Source file / repository# admin-antd-react-vite
此分支是 Vite + React 18 + Ant Design + Recoil 版本 ， Webpack UmiJS 版本请查看 v1.0-umijs (分支)（[github](https://github.com/lqsong/admin-antd-react/tree/v1.0-umijs)、[gitee](https://gitee.com/lqsong/admin-antd-react/tree/v1.0-umijs)）
## Demo
**注意：Demo 用的是在线mock服务，不稳定，若在线登录不了pull到本地可直接运行查看demo**
| **[http://vite-demo.admin-antd-react.liqingsong.cc](http://vite-demo.admin-antd-react.liqingsong.cc/)** |
:-------------------------:
|  |
## 使用文档
- [http://admin-antd-react.liqingsong.cc](http://admin-antd-react.liqingsong.cc/)
- [Github](https://github.com/lqsong/admin-antd-react)
- [Gitee](https://gitee.com/lqsong/admin-antd-react)
## 后台前端解决方案列表
- admin-element-vue（[GitHub](https://github.com/lqsong/admin-element-vue)、[Gitee](https://gitee.com/lqsong/admin-element-vue)）
- admin-antd-vue（[GitHub](https://github.com/lqsong/admin-antd-vue)、[Gitee](https://gitee.com/lqsong/admin-antd-vue)）
- admin-antd-react（[GitHub](https://github.com/lqsong/admin-antd-react)、[Gitee](https://gitee.com/lqsong/admin-antd-react)）
- electron-admin-element-vue（[GitHub](https://github.com/lqsong/electron-admin-element-vue)、[Gitee](https://gitee.com/lqsong/electron-admin-element-vue)）
- electron-admin-antd-vue（[GitHub](https://github.com/lqsong/electron-admin-antd-vue)、[Gitee](https://gitee.com/lqsong/electron-admin-antd-vue)）
- electron-admin-antd-react（[GitHub](https://github.com/lqsong/electron-admin-antd-react)、[Gitee](https://gitee.com/lqsong/electron-admin-antd-react)）
- admin-vue3-micro-qiankun（[GitHub](https://github.com/lqsong/admin-vue3-micro-qiankun)、[Gitee](https://gitee.com/lqsong/admin-vue3-micro-qiankun)）
## 前台前端SSR解决方案列表
- midway-vue3-ssr（[GitHub](https://github.com/lqsong/midway-vue3-ssr)、[Gitee](https://gitee.com/lqsong/midway-vue3-ssr)）
## 功能
```
- 登录 / 注销 / 注册
- 权限验证
- 页面权限
- 按钮操作
- 权限配置
- 全局功能
- 国际化多语言
- 动态侧边栏（支持多级路由嵌套）
- 动态面包屑（支持自定义配置）
- Svg Sprite 图标
- Mock 数据
- 综合实例
- 引导页
- 组件示例
- 编辑器
- CKEditor
- tui-editor
- 图标
- IconSvg
- 页面示例
- 列表页面
- 标准列表
- 表格列表
- 高度自适应表格
- 搜索列表
- 表单页面
- 基础表单
- 高级表单
- 详情页面
- 基础详情
- 模块详情
- 表格详情
- 权限验证
```
## 自定义配置
### **(建议)** 本地或开发模式下，不要直接修改 '.env.development'
复制 '.env.development' 重命名为 '.env.development.local' , 启用修改对应的参数.
### **(建议)** 生产模式下，不要直接修改 '.env.production'
复制 '.env.production' 重命名为 ' .env.production.local' , 修改对应的参数.
## 项目设置
### 一、Install dependencies,
```
$ pnpm install
```
推荐使用 pnpm , **[pnpm的安装与使用](http://liqingsong.cc/article/detail/26)** 。
### 二、Start the dev server,
```
$ pnpm run dev
```
### 三、Compiles and minifies for production
```
$ pnpm run build
```
### 四、精简 svg icon
```
$ pnpm run svgo
```
## 捐赠
如果你觉得这个项目帮助到了你，请帮助点击 Star，你也可以请作者喝咖啡表示鼓励.
**ALIPAY** | **WECHAT**
:-------------------------:|:-------------------------:
 | 
Explore similar templates
Compare previews and descriptions within the same stack and category.
kiaalap
Kiaalap is a free, open-source admin template from Colorlib for education, online courses, and school management.
Vite · Admin dashboard
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
arco-admin-template
A Vite + React mid-to-back-office template using Arco Design, react-router-dom v6, mockjs, and less, with internationalization, theme customization, and light/dark switching. Includes login, dashboard, resource, component examples, settings, and 404 pages.
Vite · Admin dashboard
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
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 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