# Lithe Admin





[Preview](https://lithe-admin.vercel.app)
English | [简体中文](https://github.com/tenianon/lithe-admin/blob/main/README.md)
📃 Introduction
Lithe Admin is a lightweight and elegant admin template built with Vue 3
, Naive UI
, Vite 7
, Tailwind CSS 4
, TypeScript
, and Pinia
. It adopts an origami-style page structure, features minimal business dependencies and low-coupled configuration, and is crafted for flexible extension and personalization—ideal for rapidly bootstrapping and progressively iterating admin systems.
✨ Features
- 🎨 Modern Design - Based on the Tailwind Color palette, utilizing frosted glass and texture effects to enhance visual hierarchy and theme expressiveness
- 🧩 Flexible Theming - Customize colors, themes, and component styles
- 🧭 Interaction Feedback - Smooth transitions for a natural, fluid experience
- 📱 Responsive - Solid mobile responsiveness
- 📝 Code Quality - ESLint for linting and Prettier for formatting
- 🎯 TypeScript - Full typing support for better DX
- ⚡ Vite - Fast dev server and build tool
🚀 Getting Started
Requirements
- Node.js:
^20.19.0
or >=22.12.0
- Package Manager:
pnpm
(recommended), or npm
, or yarn
Install Dependencies
# Using pnpm (recommended)
pnpm install
# Or npm
npm install
# Or yarn
yarn install
Development
pnpm dev
Unit Tests
pnpm test:unit
Build for Production
pnpm build
Preview Production Build
pnpm preview
Lint & Format
# Lint check
pnpm lint:check
# Lint fix
pnpm lint:fix
# Format check
pnpm format:check
# Format fix
pnpm format:fix
📦 Icons
This project uses Iconify. Usage examples:
<!-- Using the `ph` prefix -->
<span class="iconify ph--x"></span>
<!-- Direct usage -->
<span class="iconify-[fluent--data-area-32-regular]"></span>
The ph
prefix needs to be configured in src/assets/base.css
. Refer to the official docs: Iconify Tailwind 4
@plugin "@iconify/tailwind4" {
prefixes: ph;
prefix: 'iconify';
scale: 1.2;
}
📄 License
This project is licensed under the terms of the MIT License.