4 UI libraries to use in your WeChat Mini Programs 微信小程序

Thibault Genaitay
Le Wagon
Published in
6 min readJun 14, 2019


We’re all seeking for additional #velocity and #productivity to release our next apps. Following up on the Best Frameworks to develop a Mini Program, this time I curated the most popular UI libraries to help you speed up your projects.

Need a calendar, slider, or accordion? Stop reinventing the wheel 😉 Start with a UI library!


Table of Contents

  • WeUI by WeChat
  • Vant by Youzan
  • Wux
  • Color UI

WeUI by WeChat

The UI library by WeChat official design team, including useful widgets/modules. A little plain, but super classic. Your visitors will feel at home.


How to use it?

git clone https://github.com/Tencent/weui-wxss.git
  • Copy the initial App.wxss in your Mini Program project
  • Navigate examples of components and use all relevant wxml + js code provided

Vant by Youzan

Vant Weapp is provided by the popular SaaS e-commerce platform Youzan.

If you want to make a Mini Program for e-commerce, catering, take-out platform, ticket booking, Vant is a great choice.


How to use it?

This library is based on WeChat’s Custom Components feature. We can create and reuse them in our apps. Read the WeChat official documentation here.

git clone https://github.com/youzan/vant-weapp.git
  • Navigate all examples and register/use components you need.

📌 Most components require a set of data and some custom functions, don’t forget to take the JS code!

One by one

You can add ONE custom component at the time and use it in your page. Example: <van-card/>


"usingComponents": {
"van-card": "/dist/card/index"


thumb="{{ imageURL }}"


data: {
imageURL: '//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg'

… or ALL at once

You can also register ALL components at once in your app.json and use them later in your pages.


[...]"usingComponents": {
"van-action-sheet": "/dist/action-sheet/index",
"van-area": "/dist/area/index",
"van-badge": "/dist/badge/index",
"van-badge-group": "/dist/badge-group/index",
"van-button": "/dist/button/index",
"van-card": "/dist/card/index",
"van-cell": "/dist/cell/index",
"van-cell-group": "/dist/cell-group/index",
"van-checkbox": "/dist/checkbox/index",
"van-checkbox-group": "/dist/checkbox-group/index",
"van-col": "/dist/col/index",
"van-dialog": "/dist/dialog/index",
"van-field": "/dist/field/index",
"van-goods-action": "/dist/goods-action/index",
"van-goods-action-icon": "/dist/goods-action-icon/index",
"van-goods-action-button": "/dist/goods-action-button/index",
"van-icon": "/dist/icon/index",
"van-loading": "/dist/loading/index",
"van-nav-bar": "/dist/nav-bar/index",
"van-notice-bar": "/dist/notice-bar/index",
"van-notify": "/dist/notify/index",
"van-panel": "/dist/panel/index",
"van-popup": "/dist/popup/index",
"van-progress": "/dist/progress/index",
"van-radio": "/dist/radio/index",
"van-radio-group": "/dist/radio-group/index",
"van-row": "/dist/row/index",
"van-search": "/dist/search/index",
"van-slider": "/dist/slider/index",
"van-stepper": "/dist/stepper/index",
"van-steps": "/dist/steps/index",
"van-submit-bar": "/dist/submit-bar/index",
"van-swipe-cell": "/dist/swipe-cell/index",
"van-switch": "/dist/switch/index",
"van-switch-cell": "/dist/switch-cell/index",
"van-tab": "/dist/tab/index",
"van-tabs": "/dist/tabs/index",
"van-tabbar": "/dist/tabbar/index",
"van-tabbar-item": "/dist/tabbar-item/index",
"van-tag": "/dist/tag/index",
"van-toast": "/dist/toast/index",
"van-transition": "/dist/transition/index",
"van-tree-select": "/dist/tree-select/index",
"van-datetime-picker": "/dist/datetime-picker/index",
"van-rate": "/dist/rate/index",
"van-collapse": "/dist/collapse/index",
"van-collapse-item": "/dist/collapse-item/index",
"van-picker": "/dist/picker/index"


steps="{{ steps }}"
active="{{ active }}"
steps="{{ steps }}"
active="{{ active }}"
<van-button bind:click="nextStep">下一步</van-button>


active: 0,
steps: [
text: '步骤一',
desc: '描述信息'
text: '步骤二',
desc: '描述信息'
text: '步骤三',
desc: '描述信息'
text: '步骤四',
desc: '描述信息'
nextStep() {
active: ++this.data.active % 4


Wux is an open source library with the highest diversity: over 60 reusable and extensible WeChat Mini Program Custom Components.

You will want to check its progress loops, skeleton screens, filter bars, numeric keypads, and result pages.


How to use it?

Example: wux-button


"usingComponents": {
"wux-button": "../../dist/button/index"


<wux-button size="small" block type="balanced"> OK </wux-button>
<wux-button size="default" block outline type="balanced"> OK </wux-button>
<wux-button size="large" block type="dark"> OK </wux-button>


@import '../../dist/styles/index.wxss';

Color UI

ColorUI is a component library that focuses on visual interaction. Compared to WeUI’s plain style, ColorUI has bright colors and diverse shapes. You will like its timelines, step bars, chat pages, modal windows.


How to use it

  • Clone or download the Color UI repo and move the demo/colorui/ folder inside your Mini Program project
  • Inside app.WXSS, import two stylesheets:
@import "colorui/main.wxss";
@import "colorui/icon.wxss";
  • This library is using a custom navigation bar! Add this inside app.JSON:
"window": {
"navigationStyle": "custom"
"usingComponents": {
  • Inside app.JS:
onLaunch: function() {
success: e => {
this.globalData.StatusBar = e.statusBarHeight;
let custom = wx.getMenuButtonBoundingClientRect();
this.globalData.Custom = custom;
this.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
  • At the top of any page.WXML, always use:
<cu-custom bgColor="bg-gradual-pink" isBack="{{true}}">
<view slot="backText">返回</view>
<view slot="content">导航栏</view>
  • Navigate examples of pages or components and copy paste all relevant WXML + JS code provided

That’s it?

The 4 UI libraries above are my short-list for beginners. Also worth noting:

Have you bookmarked any other?

Feel free to reach out 🙌

Le Wagon is a coding school bringing technical skills to creative individuals in China. Rated 1st Coding Bootcamp worldwide, its Full Stack curriculum empowers participants to learn JavaScript and design WeChat Mini Programs from scratch.

Related links
👉 Entrepreneurs: learn how to make your own WeChat mini program
👉 Recruiters: WeChat developers for hire

Connect with our teams:
🚩 Le Wagon in Chengdu
🚩 Le Wagon in Shanghai
🚩 Le Wagon in Shenzhen



Thibault Genaitay
Le Wagon

Bringing tech skills to creative people, one bootcamp at a time.