WeUI — WeChat-Style UI Component Library for Mobile Web

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/