explaingit

tencent/weui-wxss

★ 15,279LessAudience · developerComplexity · 2/5LicenseSetup · easy

TLDR

Official WeChat-styled UI component stylesheet for WeChat Mini Programs, written in wxss. Provides buttons, cells, dialogs, toasts, and icons in WeChat native look.

Mindmap

mindmap
  root((weui-wxss))
    Inputs
      wxss import
      data-weui-theme attribute
    Outputs
      Styled buttons
      Cells and lists
      Dialogs and toasts
      Icons
    Use Cases
      Build a WeChat Mini Program UI
      Match WeChat native styling
      Add dark mode to a mini program
    Tech Stack
      WXSS
      Less
      WeChat Mini Program
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Style a new WeChat Mini Program to match WeChat native UI

USE CASE 2

Add a dark mode theme to an existing mini program via data-weui-theme

USE CASE 3

Use the rpx sizing variant to keep layouts responsive across phone sizes

USE CASE 4

Pull individual components like dialog or toast into a custom mini program

Tech stack

WXSSLessWeChat

Getting it running

Difficulty · easy Time to first run · 30min

Only works inside the WeChat Mini Program runtime, not the general web.

MIT license, free to use commercially with attribution.

In plain English

WeUI for wxss is a UI component library created by WeChat's official design team, specifically for building WeChat Mini Programs. WeChat Mini Programs are lightweight apps that run inside the WeChat chat app without needing to be downloaded separately, and wxss is their CSS-like styling language. This library provides ready-made visual components that match WeChat's native look and feel, so developers building mini programs can quickly create interfaces that feel consistent with the WeChat platform. The component library includes commonly used interface elements: buttons, cells (rows used in list layouts), dialogs (popup messages), progress indicators, toast notifications (brief status messages), article layouts, action sheets (bottom-up menus), and icons. The README is written in Chinese and notes the library is a pure UI/style library -- if you want a version with logic and behavior encapsulated, WeChat also offers a separate component library. To use it, you import the provided wxss stylesheet file directly into your mini program. Dark mode is supported by adding a data-weui-theme="dark" attribute to the root element. The library provides two sizing variants: a default version using px units and an rpx version (WeChat's responsive pixel unit). It is released under the MIT license.

Copy-paste prompts

Prompt 1
Show me how to import weui-wxss into a fresh WeChat Mini Program and use the button styles
Prompt 2
Give me a wxml snippet that renders a weui cell list with icons and a switch on the right
Prompt 3
Explain how to enable dark mode in weui-wxss and which CSS variables I can override
Prompt 4
Compare weui-wxss with the logic-bundled WeUI component library and tell me when to pick each
Open on GitHub → Explain another repo

← tencent on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.