shadcn-vue-admin

# Shadcn Vue Admin

[![code style](https://antfu.me/badge-code-style.svg)](https://github.com/antfu/eslint-config)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/Whbbit1999/shadcn-vue-admin/blob/main/LICENSE)
[![Vue 3.5+](https://img.shields.io/badge/Vue-3.5+-brightgreen.svg?logo=vue.js)](https://vuejs.org/)
[![Vite](https://img.shields.io/badge/Vite-8+-4f30e8.svg?logo=vite)](https://vitejs.dev/)
[![pnpm 11](https://img.shields.io/badge/pnpm-11-orange.svg?logo=pnpm)](https://pnpm.io/)
[![TypeScript 6.0+](https://img.shields.io/badge/TypeScript-6.0+-blue.svg?logo=typescript)](https://www.typescriptlang.org/)

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

A frontend UI template built with **shadcn-vue**, **Vue 3** and **Vite**, bringing together common layouts, components and example pages that you can customize and extend.
Adapted from [shadcn-admin](https://github.com/satnaing/shadcn-admin) for Vue.

[Live Demo](https://shadcn-vue-admin.netlify.app/)

![cover](.github/assets/shadcn-vue-admin.png)

> This repository provides frontend examples. Login is mocked, and pages such as Tasks use local sample data. Connect your own authentication and business APIs before using it in production.

## ✨ Key Features

- ✅ Light, dark and system appearance, with persistent theme settings
- ✅ Global search command palette
- ✅ Sidebar navigation built with shadcn-vue components
- ✅ Example pages for dashboards, tasks, users, settings, authentication and errors
- ✅ Custom component library with shadcn-vue extensions
- ✅ Auto-generated routing system (based on file structure)
- ✅ English and Simplified Chinese locale resources with vue-i18n (some page copy remains hardcoded)
- ✅ Form validation with tanstack/vue-form + Zod
- ✅ Reusable data tables with TanStack Table, query/mutation examples with TanStack Query, and charts with Unovis
- ✅ Animation support (AutoAnimate, Motion-V, TW Animate CSS)

## 🛠️ Tech Stack & Version Constraints

| Category             | Tools & Libraries (Major Versions)                                                                                                                         |
| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Core Framework       | [Vue 3.5+](https://vuejs.org/), [TypeScript 6+](https://www.typescriptlang.org/)                                                                           |
| UI Components        | [shadcn-vue](https://www.shadcn-vue.com), [reka-ui 2+](https://www.reka-ui.com/), [@lucide/vue](https://lucide.dev/)                                       |
| Build Tool           | [Vite 8+](https://vitejs.dev/), [@vitejs/plugin-vue 6+](https://github.com/vitejs/vite-plugin-vue)                                                         |
| State Management     | [Pinia 4+](https://pinia.vuejs.org/), [pinia-plugin-persistedstate 4+](https://prazde