ViteReactAdmin dashboardStarter

antd-admin-template — Vite Admin dashboard Template

By liangjiayu

An out-of-the-box admin template based on React and Ant Design, built with Vite, featuring multiple layouts, an access-control scheme, and Swagger API generation.

Explore the design

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

1 previews
Author preview
Author-provided previewTop of page

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-10-02View source

What stands out

A quick read of the recorded project description.

01

Build admin interfaces with React, React Router, Ant Design, and Ant Design Pro Components

02

Multiple built-in layouts; custom layouts are written with Tailwind CSS and support light/dark theme switching

03

Provides a lightweight access-control scheme at both route and button levels

04

Integrates a script that generates API functions based on the Swagger specification

05

Includes built-in code linting and formatting configuration for oxlint and oxfmt

06

The README states that the project includes conventions and example code for AI-assisted development

Template Details

antd-admin-template is a front-end template for admin scenarios. It uses React and the Ant Design component library, uses Vite as the build tool, and manages dependencies with pnpm. The project provides multiple built-in layouts; custom layouts are written with Tailwind CSS and support light and dark theme switching. The template includes a lightweight access-control scheme for route-level and button-level control. It also integrates a script that generates API functions based on the Swagger specification, along with code linting and formatting configuration for oxlint and oxfmt. The README also states that the project includes development conventions and example code for AI-assisted development.

For usage, the template requires Node.js 20 or later. After pulling the repository with tiged and installing dependencies, you can start the development server. It also provides script commands for building a production bundle and generating API functions. Browser support covers the latest two versions of modern browsers.

For licensing, the repository uses the MIT License, which permits free use, modification, commercial use, and distribution of this version of the code, provided the copyright notice and license notice are retained when distributing. Note that the code's MIT license does not cover third-party assets such as demo images, fonts, and icons, and external services such as domains, hosting, and databases may incur separate charges.

ViteReactAdminStarter

Is it right for your project?

Use Cases

  • Front-end projects that need to quickly build an admin management interface
  • Teams that want to start a new admin system based on React and Ant Design
  • Admin applications that require route-level or button-level access control
  • Projects where the backend provides Swagger documentation and the frontend API functions should be generated automatically
  • Admin interfaces that need light/dark themes and switching between multiple layouts

Suitable For

  • Front-end developers familiar with React and Ant Design
  • Teams that need an admin template as a starting point
  • Projects that use Swagger to describe backend APIs
  • Developers who accept managing dependencies with pnpm and using Node.js 20 or later

Getting started & customization

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

  1. 1

    Requires Node.js 20 or later

  2. 2

    Create the project with npx tiged liangjiayu/antd-admin-template my-admin

  3. 3

    Enable corepack with corepack enable to match the pnpm version, then run pnpm install

  4. 4

    Development and build commands are pnpm dev and pnpm build; generate API functions with pnpm openapi

  5. 5

    Third-party assets such as demo images, fonts, and icons must be checked against their respective licenses; external services may incur separate charges

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This listing covers the free version in the public repository under the MIT License; the free scope is this version of the code 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 complete 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

  • Using this template requires Node.js 20 or later installed locally; lower versions cannot run the development and build commands as described in the README.
  • Dependency installation requires enabling corepack first to match the pnpm version and using pnpm as the package manager; using other package managers such as npm or yarn is not supported by the README.
  • Creating a project requires pulling the repository from GitHub via tiged, which requires network access to GitHub.
  • The API function generation feature depends on the backend providing API documentation that conforms to the Swagger specification; without that documentation, this feature cannot be used.
  • Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses and cannot be judged solely by the code's MIT License.
  • External services such as domains, hosting, databases, payments, or AI may incur separate charges.
View Original Text Basis

Permission is hereby granted, free of charge

Original License Text

环境要求:Node.js >= 20

Original README

corepack enable pnpm install

Original README

npx tiged liangjiayu/antd-admin-template my-admin

Original README

根据 swagger 生成接口函数

Original README
https://github.com/liangjiayu/antd-admin-template/blob/main/LICENSEhttps://github.com/liangjiayu/antd-admin-template/blob/main/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-02. 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 · 88 / 100
Technologies
Vite · React
Website type
Admin dashboard · Starter
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
2026-06-26
Screenshot last checked
2026-10-02

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: 85a1db9adff3d41ec1d5e78a9be04a6848ced43c24f2f4fbdeffbe317a5203bb

2026-10-02T21:07:12.449Z

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

<div align="center">

开箱即用的现代中后台模板,基于 React 19、Ant Design 6 等最新技术栈。内置 AI 编码规范,让 AI 辅助开发也能产出一致、可控的代码。

[![](https://badgen.net/badge/icon/Ant%20Design?icon=https://gw.alipayobjects.com/zos/antfincdn/Pp4WPgVDB3/KDpgvguMpGfqaHPjicRK.svg&label)](https://ant.design/)
[![](https://badgen.net/static/Build%20with/Vite/blue)](https://vite.dev)
[![](https://badgen.net/static/Linted%20with/oxlint/blue)](https://oxc.rs)

![](http://cdn.liangjiayu.cn/images/admin-preview.png)

![](http://cdn.liangjiayu.cn/images/admin-preview-dark.png)

</div>

## 特性

- 🚀 最新技术栈:基于 React 19、React Router 7、Ant Design 6、Tailwind CSS 4 等主流技术栈。
- 🤖 AI 友好:内置开发规范与示例代码,让 AI 辅助开发更顺畅、产出更可控。
- 🎨 现代布局:内置多套布局,符合现代审美,覆盖大部分中后台场景;自定义布局纯 Tailwind 编写,可 100% 自由定制,支持亮 / 暗主题切换。
- 🔐 权限管理:内置轻量权限方案,支持路由级与按钮级控制,结构清晰、易于扩展。
- 🔗 接口生成:基于 swagger 协议一键生成接口函数,减少重复工作。
- 📋 代码规范:内置 oxlint + oxfmt,提供开箱即用的代码检查与格式化。
- ⚡️ Vite:现代化的前端构建工具,快速冷启动,瞬间热更新。

## 技术栈

| 分类       | 选型                                     |
| ---------- | ---------------------------------------- |
| 框架       | React 19 + React Router 7                |
| UI 组件    | Ant Design 6 + Ant Design Pro Components |
| 样式       | Tailwind CSS 4                           |
| 服务端状态 | TanStack Query 5                         |
| 客户端状态 | Zustand 5                                |
| HTTP 请求  | axios                                    |
| 接口生成   | @umijs/openapi                           |
| 图标       | Ant Design Icons + lucide-react          |
| 代码规范   | oxlint + oxfmt                           |
| 构建工具   | Vite                                     |
| 包管理     | pnpm                                     |

## 快速开始

> 环境要求:Node.js >= 20

**1. 创建项目**

```bash
npx tiged liangjiayu/antd-admin-template my-admin
cd my-admin
```

**2. 安装依赖**

```bash
# 启用 corepack,自动匹配 pnpm 版本
corepack enable
pnpm install
```

**3. 启动开发**

```bash
# 启动开发服务器
pnpm dev
# 构建生产包
pnpm build
# 根据 swagger 生成接口函数
pnpm openapi
```

## 浏览器支持

现代浏览器。

<!-- prettier-ignore -->
| [<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 |
| --- | --- | --- | --- |
| last 2 versions | last 2 versions | last 2 versions | last 2 versions |

## 参与贡献

欢迎任何类型的贡献,以下是您可以为该项目做出贡献的一些示例:

- 在日常工作中使用 Antd Admin Template。
- 通过 [Issue](https://github.com/liangjiayu/antd-admin-template/issues) 报告 bug 或提出问题。
- 提交 [Pull Request](https://github.com/liangjiayu/antd-admin-template/pulls) 改进 项目 的代码。
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

react-starter-kit

react-starter-kit

A full-stack SaaS monorepo starter built on Vite and React, with Bun, TypeScript, tRPC, Drizzle ORM, Better Auth, Stripe, and Cloudflare Workers. It includes email OTP, passkey, Google OAuth, organizations, subscription billing, Drizzle migrations, seed scripts, and Terraform infrastructure.

Vite · SaaS

cove

cove

Cove is a minimal TanStack Start starter template maintained by mugnavo, integrating React, TanStack Router/Query, Tailwind CSS, shadcn/ui, Drizzle ORM with PostgreSQL, Better Auth, Vite Plus, and Nitro.

Vite · SaaS

vite-react-boilerplate

vite-react-boilerplate

A production-ready Vite + React starter template with TypeScript, Tailwind CSS, TanStack Router/Query/Table, Storybook, React Hook Form + Zod, Vitest and Playwright testing, plus Husky/Commitizen/Commitlint commit conventions.

Vite · Starter

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

typescript-react_best_practices-vite_template

typescript-react_best_practices-vite_template

A Vite + React + TypeScript starter template by CodelyTV, preconfigured with Jest and React Testing Library unit tests, Cypress end-to-end tests, ESLint and Prettier using Codely's shared configuration, GitHub Actions workflows, a Makefile, and Sass.

Vite · Starter