Skip to content

README_en.md

Latest commit

 

History

History
149 lines (113 loc) · 4.69 KB

README_en.md

File metadata and controls

149 lines (113 loc) · 4.69 KB
Raw

Glass UI Logo

Glass UI React

A dark glassmorphism React workspace template

Live Demo

React 19 Vite 6 Tailwind 4 TypeScript 中文

Preview

Dashboard

Theme Switching Command Palette

Glass Components

Features

  • Dark Glassmorphism UI — frosted glass surfaces + holographic gradients + ambient glow
  • 5 Theme Presets — Aurora / Cyber / Sunset / Forest / Scholar (each with dark/light)
  • Registry-Driven Architecture — add a page in one line, routes/nav/commands auto-derive
  • 40+ Components — Radix + shadcn pattern, fully token-driven
  • 30+ Business Scenarios — Dashboard, Board, Inbox, CRM, AI Chat, IoT, Healthcare…
  • Skills System — plugin marketplace, capability assembly, custom extensions
  • i18n Ready — Chinese + English, useTranslation() throughout
  • PWA Support — installable progressive web app

Tech Stack

Category Technology
Framework React 19 + React Router 7
Build Vite 6 + SWC
Styling Tailwind CSS v4 + CVA
Components Radix UI + shadcn pattern
State Zustand 5 + TanStack Query 5
Forms React Hook Form + Zod
i18n i18next + react-i18next
Charts Recharts
Animation Framer Motion
DnD @dnd-kit
Mock API MSW 2
Types TypeScript 5.7

Quick Start

# Install dependencies
pnpm install

# Start dev server
pnpm dev

# Build for production
pnpm build

# Preview production build
pnpm preview

# Type check
pnpm typecheck

# Lint
pnpm lint

Project Structure

src/
├── theme/              Design tokens, CSS variables, theme config
├── components/
│   ├── ui/             40+ atomic components (Button, Dialog, Table...)
│   ├── shared/         Business composites (PageHeader, StatCard...)
│   ├── charts/         Chart wrappers (recharts)
│   ├── overlays/       Command palette, Copilot panel
│   └── settings-drawer/  Appearance settings panel
├── scenarios/
│   ├── registry.ts     Scenario registry (single source of truth)
│   ├── _kit/           Scenario layout templates
│   ├── dashboard/      Dashboard
│   ├── board/          Kanban board
│   ├── skills/         Skill plugin marketplace
│   └── ...             30+ more scenarios
├── layouts/            App shell (sidebar, topbar, auth)
├── api/                TanStack Query hooks
├── mocks/              MSW handlers + fixture data
├── store/              Zustand stores
├── i18n/               Internationalization (zh-CN, en)
├── routes/             Route path constants
└── lib/                Utilities (cn, format, platform)

Documentation

Document Description
Architecture Layer architecture, registry routing, state management
Design Tokens Token system, themes, fonts
Components Atomic, composite, utilities
Scenarios 30+ business scenarios, Skills
UI Guide Visual specs, spacing, typography, motion

Contact

Feel free to reach out — scan the QR code to add me on WeChat:

WeChat QR Code

License

AGPL-3.0