BirdMonitoringPlatform

# 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

Create project

# Using pnpm (recommended)
pnpm create lithe@latest

# Or npm
npm create lithe@latest

# Or yarn
yarn create lithe@latest

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;
}