Skip to content

README.en_US.md

Latest commit

 

History

History
128 lines (90 loc) · 2.92 KB

README.en_US.md

File metadata and controls

128 lines (90 loc) · 2.92 KB

Lithe Admin

Vue Naive UI Vite Tailwind CSS TypeScript

Preview

English | 简体中文

📃 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

# Check types
pnpm type-check

# 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="icon-[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;
  scale: 1.2;
}