# WeUI — WeChat-Style UI Component Library for Mobile Web

> A lightweight CSS library implementing WeChat's native visual design language for mobile web applications and mini-programs.

## Install

Save as a script file and run:

# WeUI — WeChat-Style UI Component Library for Mobile Web

## Quick Use
```bash
npm install weui
# Import in your CSS
# @import "weui/dist/style/weui.css";
```

## Introduction
WeUI is an officially maintained CSS library by the WeChat design team at Tencent. It provides a consistent set of UI components that match the native look and feel of WeChat, making mobile web pages and mini-programs feel integrated with the WeChat ecosystem.

## What WeUI Does
- Provides pre-built CSS components matching WeChat's native design language
- Covers common mobile patterns: buttons, cells, dialogs, toasts, action sheets
- Ships form elements styled for mobile touch interactions
- Includes icon fonts and loading spinners consistent with WeChat UX
- Works across WeChat's in-app browser, mini-programs, and standard mobile browsers

## Architecture Overview
WeUI is a pure CSS library with no JavaScript runtime dependency. The source is authored in Less and compiled to a single distributable CSS file. Components follow a BEM-like naming convention with the `weui-` prefix. The library is intentionally minimal so it layers cleanly on top of any JavaScript framework or vanilla HTML.

## Self-Hosting & Configuration
- Install via npm (`npm install weui`) or link the CDN-hosted stylesheet
- Import `weui.css` or `weui.min.css` into your project entry point
- Customize variables by importing the Less source and overriding tokens before compilation
- No build tooling required for the pre-compiled CSS distribution
- Pairs with `weui.js` (separate package) for interactive component behaviors like picker and slider

## Key Features
- Pixel-perfect alignment with WeChat's native UI on iOS and Android
- Tiny footprint: the minified CSS is under 50 KB
- Framework-agnostic: works with React, Vue, vanilla JS, or mini-program templates
- Accessibility-friendly semantic HTML patterns
- Active maintenance by Tencent's WeChat team with regular updates

## Comparison with Similar Tools
- **Ant Design Mobile** — full React component library with heavier runtime; WeUI is CSS-only and framework-agnostic
- **Vant** — Vue-specific mobile component library with richer interactive widgets; WeUI focuses on matching WeChat's exact design language
- **Framework7** — cross-platform mobile UI kit with its own routing and state; WeUI is intentionally a styling layer only
- **Ionic** — targets hybrid native apps with Capacitor/Cordova; WeUI targets WeChat's in-app browser and mini-programs

## FAQ
**Q: Does WeUI require JavaScript?**
A: No. The core library is pure CSS. The optional `weui.js` companion package adds JavaScript behaviors for components like date pickers.

**Q: Can I use WeUI outside of WeChat?**
A: Yes. It works in any mobile browser. Components will render correctly; they just happen to match WeChat's visual style.

**Q: Is WeUI compatible with WeChat mini-programs?**
A: Yes. Tencent also provides `weui-wxss`, a WXSS adaptation of WeUI specifically for the mini-program runtime.

**Q: How do I customize the theme colors?**
A: Import the Less source files and override the color variables before compiling. The default theme matches WeChat's green accent.

## Sources
- https://github.com/Tencent/weui
- https://weui.io/

---
Source: https://tokrepo.com/en/workflows/asset-73f5066d
Author: Script Depot