explaingit

tencent/weui

★ 27,370HTMLAudience · developerComplexity · 1/5LicenseSetup · easy

TLDR

WeUI is the official UI component library from WeChat's design team for building web pages inside WeChat that look and feel like a native part of the app, buttons, dialogs, list rows, and more in WeChat's own visual style.

Mindmap

mindmap
  root((WeUI))
    Platform
      WeChat browser
      Mobile web
    Components
      Buttons and cells
      Dialogs and toasts
      Action sheets
      Progress bars
    Purpose
      Native WeChat feel
      Consistent styling
    License
      MIT open source
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

Build a WeChat mini web app or service page that matches the native WeChat look so users feel at home

USE CASE 2

Add WeChat-style buttons, toast notifications, and list rows to a mobile landing page running in the WeChat browser

USE CASE 3

Create a campaign or checkout page inside WeChat with action sheets, progress bars, and confirm dialogs

Tech stack

HTMLCSS

Getting it running

Difficulty · easy Time to first run · 5min
Free to use for any purpose including commercial projects, as long as you keep the copyright notice.

In plain English

WeUI is a UI framework (a collection of ready-made visual building blocks) officially designed by the WeChat Design Team and tailored for building web pages inside WeChat, the messaging and super-app platform used widely in China. Its goal is to make WeChat-based web services look and feel consistent with the native WeChat app experience. It provides common mobile interface components like buttons, cells (list rows), dialogs (pop-up windows), progress bars, toast notifications (brief status messages), article layouts, action sheets (bottom slide-up menus), and icons. Because these match WeChat's own visual style, apps built with WeUI feel native to WeChat users rather than out of place. You would use WeUI when building a mini web app, a service page, or a campaign landing page that runs inside the WeChat browser, where matching the familiar WeChat look is important for user trust and comfort. It is written in HTML and CSS and is available as an open-source package under the MIT license.

Copy-paste prompts

Prompt 1
Show me how to use WeUI to build a mobile product listing page with list rows, an action sheet, and a confirm dialog for WeChat.
Prompt 2
How do I install WeUI in my project and add a styled button and toast notification to a webpage inside WeChat?
Prompt 3
Create a WeUI form page with labeled input fields and a submit button that matches the WeChat native design.
Prompt 4
What WeUI components can I use to show a loading spinner while my page is fetching data inside WeChat?
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.