Shadcn Vue Admin

简体中文 | English

A production-grade admin dashboard UI built with Shadcn-vue, Vue 3.5+ and Vite, focusing on responsiveness, accessibility and developer experience. Forked from shadcn-admin

⚠️ Version Note: This is a starter template. New components and features will be continuously added to the project.

✨ Key Features

• ✅ Light/Dark mode toggle with Pinia persistent state
• ✅ Global search command palette
• ✅ Accessible shadcn-ui sidebar navigation
• ✅ 8+ pre-built functional pages
• ✅ Custom component library with shadcn-vue extensions
• ✅ Auto-generated routing system (based on file structure)
• ✅ Internationalization support (vue-i18n v11+)
• ✅ Form validation with tanstack/vue-form + Zod
• ✅ Data visualization with TanStack Table/Query & Unovis
• ✅ Animation support (AutoAnimate, Motion-V, TW Animate CSS)

🛠️ Tech Stack & Version Constraints

Category	Tools & Libraries (Major Versions)
Core Framework	Vue 3.5+, TypeScript 5.9+
UI Components	shadcn-vue, reka-ui 2+, @lucide/vue
Build Tool	Vite, @vitejs/plugin-vue 6+
State Management	Pinia 3+, pinia-plugin-persistedstate 4+
Routing	vue-router 5+, vite-plugin-vue-layouts 0.11+
Styling	Tailwind CSS 4+, tailwindcss-animate 1+
Data Handling	TanStack Vue Query 5+, TanStack Vue Table 8+
Form Validation	TanStack Vue Form, Zod 4+
Animation	@formkit/auto-animate 0.9+, motion-v 1+
Internationalization	vue-i18n 11+
HTTP Client	ofetch
Linting & Formatting	ESLint 9+, @antfu/eslint-config 7+
Dev Tools	vite-plugin-vue-devtools 8+
Auto Import	unplugin-auto-import 20+, unplugin-vue-components 30+

🚀 Quick Start

Prerequisites (Strict Version Requirements)

• Node.js ≥ 22.x (LTS recommended)
• pnpm 10+ (Project-specified package manager)
• TypeScript ≥ 5.9.0

Installation

1. Clone the repository

   git clone https://github.com/Whbbit1999/shadcn-vue-admin.git

2. Navigate to project directory

   cd shadcn-vue-admin

3. Install dependencies

   pnpm install

4. Start development server

   pnpm dev

Available Scripts

pnpm dev             # Start development server
pnpm build           # Build for production (vue-tsc + vite build)
pnpm preview         # Preview production build
pnpm lint            # ESLint check
pnpm lint:fix        # Auto fix lint issues
pnpm release         # Bump version with bumpp

📖 Advanced Guides

Dependency Maintenance

• All project dependencies are updated every Tuesday （UTC/GMT +8:00） to ensure security and compatibility.
• Version constraints are strictly managed (pinned versions for critical dependencies).
• Git hooks (pre-commit) are enabled via simple-git-hooks + lint-staged for code quality.

Theme Customization

If you need to change the website style, you can use the preset styles provided by tweakcn. You only need to copy the css variables provided by tweakcn to index.css and change the :root :dark and @theme inline parts.

Layout Customization (No index.vue in nested directories)

For pages in pages/errors/ and pages/auth/ that you don’t want to use the default layout:

Create a same-name file in pages/: src/pages/errors.vue src/pages/auth.vue

<template>
  <router-view />
</template>

<route lang="yml">
meta:
  layout: false
</route>

This will generate extra empty routes like /errors/ and /auth/. To fix it, create index.vue inside the directory and add redirect:

<script lang="ts" setup>
const router = useRouter()
router.replace({ name: '/errors/404' })
</script>

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🤝 Credits

• Developer: Whbbit1999
• Original Design: shadcn-admin