# tencent/weui

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/tencent-weui).**

27,376 stars · 6,299 forks · HTML · NOASSERTION

## Links

- GitHub: https://github.com/Tencent/weui
- Homepage: https://weui.io
- awesome-repositories: https://awesome-repositories.com/repository/tencent-weui.md

## Topics

`mobile-web` `style` `wechat` `weui`

## Description

WeUI is a mobile web UI library and design system consisting of CSS components and HTML templates. It is specifically designed to replicate the visual identity and interface of the WeChat messaging ecosystem, providing a standardized set of components to build responsive mobile web interfaces.

The library functions as a stateless component system, utilizing a pure CSS architecture and HTML templates that rely on external JavaScript for interactivity. It employs a BEM-based class naming convention to manage component nesting and prevent style leakage across complex layouts.

The framework includes a comprehensive set of mobile widgets, such as action sheets, pickers, and navigation bars, alongside a curated collection of platform-specific design tokens for colors and spacing.

## Tags

### User Interface & Experience

- [Mobile Messaging Interfaces](https://awesome-repositories.com/f/user-interface-experience/chat-interfaces/mobile-messaging-interfaces.md) — Provides a comprehensive set of components and layout logic to build mobile messaging interfaces. ([source](https://github.com/tencent/weui#readme))
- [Design Tokens](https://awesome-repositories.com/f/user-interface-experience/design-token-management/design-tokens.md) — Provides curated design tokens for colors and spacing to maintain a consistent visual identity.
- [Ecosystem Design Systems](https://awesome-repositories.com/f/user-interface-experience/ecosystem-design-systems.md) — Replicates the specific visual identity and interface of the WeChat messaging ecosystem.
- [Web-Based Native UI](https://awesome-repositories.com/f/user-interface-experience/native-ui-component-libraries/web-based-native-ui.md) — Renders native-like interface elements using standard HTML and CSS within the web browser.
- [CSS Class-Based Styling](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-class-based-styling.md) — Defines visual styles through a system of semantic CSS classes for consistent mobile rendering.
- [Design System Specifications](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/design-utilities/design-system-specifications.md) — Implements a design system with technical specifications to replicate the WeChat interface.
- [CSS Frameworks](https://awesome-repositories.com/f/user-interface-experience/css-frameworks.md) — Functions as a CSS framework providing pre-styled interface elements and layout patterns.
- [Mobile UI Widgets](https://awesome-repositories.com/f/user-interface-experience/mobile-ui-widgets.md) — Ships a set of mobile widgets including action sheets, pickers, and navigation bars.
- [Mobile Design System Implementations](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/design-utilities/design-systems/component-implementation-patterns/mobile-design-system-implementations.md) — Implements mobile-specific widgets such as action sheets and pickers for web applications.

### Part of an Awesome List

- [Stateless Templates](https://awesome-repositories.com/f/awesome-lists/devtools/html-templates/stateless-templates.md) — Provides stateless HTML templates that rely on external JavaScript for interactivity.
- [Mobile UI Components](https://awesome-repositories.com/f/awesome-lists/devtools/mobile-ui-components.md) — Provides a collection of mobile UI components and templates for responsive web interfaces.

### Web Development

- [Component Libraries](https://awesome-repositories.com/f/web-development/component-libraries.md) — Provides a library of reusable, stateless UI building blocks for web applications.
- [CSS-Only UI Components](https://awesome-repositories.com/f/web-development/css-development-utilities/css-only-ui-components.md) — Builds user interface elements using pure CSS and HTML to minimize JavaScript overhead.
- [Mobile Web Interaction Libraries](https://awesome-repositories.com/f/web-development/mobile-web-interaction-libraries.md) — Creates responsive web layouts and interfaces optimized for mobile browser interaction.
- [UI Component Libraries](https://awesome-repositories.com/f/web-development/ui-component-libraries.md) — Provides a standardized library of pre-made buttons, lists, and navigation elements.
- [BEM-Based Naming](https://awesome-repositories.com/f/web-development/syntax-conventions/bem-based-naming.md) — Implements BEM naming conventions to organize CSS selectors and prevent style leakage.