explaingit

tencent/weui

★ 27,373HTMLAudience · vibe coderComplexity · 2/5MaintainedLicenseSetup · easy

TLDR

A UI framework of ready-made components (buttons, dialogs, notifications) designed by WeChat to make web pages inside WeChat look and feel native to the app.

Mindmap

mindmap
  root((WeUI))
    What it does
      Mobile components
      WeChat native look
      Consistent styling
    Components
      Buttons and cells
      Dialogs and toasts
      Action sheets
      Icons and layouts
    Use cases
      Mini web apps
      Service pages
      Campaign landing pages
    Tech stack
      HTML and CSS
      Open source
      MIT licensed

Things people build with this

USE CASE 1

Build a mini web app inside WeChat that matches the native app's look and feel.

USE CASE 2

Create a service page or landing page for a WeChat campaign with consistent styling.

USE CASE 3

Design a mobile-first web interface using pre-built components without starting from scratch.

Tech stack

HTMLCSS

Getting it running

Difficulty · easy Time to first run · 5min
Use freely for any purpose, including commercial use, 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 add a WeUI button and dialog to a simple HTML page for a WeChat mini app.
Prompt 2
I need to build a form with WeUI cells and action sheets. What's the HTML structure and CSS classes I should use?
Prompt 3
How do I customize WeUI component colors and spacing to match my brand while keeping the WeChat native feel?
Prompt 4
What WeUI components should I use to build a product listing page inside WeChat?
Open on GitHub → Explain another repo

Generated 2026-05-18 · Model: sonnet-4-6 · Verify against the repo before relying on details.