Skip to content
Get packs

Vant Weapp

A lightweight UI component library for WeChat Mini Programs.

GitHub Download v1.11.7
Stars
18.5k
Forks
3.5k
Licence
MIT
Language
JavaScript
Last update
27 days ago
Type
Library

What it is

Vant Weapp is a set of ready-made user interface components (such as buttons) for building WeChat Mini Programs, the small apps that run inside the WeChat app. Developers add the components to their pages instead of building each button, form, or panel from scratch. The README describes it as a lightweight, reliable mobile component library, and it is one of the Vant family of libraries.

  • Add a styled button to a Mini Program page using the van-button component
  • Build a mobile form or list screen using the library's components
  • Browse the component documentation site to find examples and APIs

Great for

  • Developers building WeChat Mini Programs who want ready-made UI components
  • Teams that already know the WeChat official Mini Program framework
  • Projects that need a consistent mobile look without designing every control

Not ideal for

  • Developers building web pages or native iOS/Android apps, since this is only for WeChat Mini Programs
  • Beginners who have not yet learned the basics of Mini Program development, which the README says is a prerequisite
  • Projects that need the Alipay Mini Program version, which the README says is a separate community project
Step-by-step guide: how to use Vant WeappInstall, first run, examples, tips and FAQs
ColorUI vs Vant Weapp

How to get it

  1. 1

    Install with a package manager

    You'll need: WeChat Developer Tools · Node.js and npm or yarn

    Install via npm (recommended)

    npm i @vant/weapp -S --production

    Install via yarn

    yarn add @vant/weapp --production

    Clone the source code

    git clone https://github.com/youzan/vant-weapp.git
  2. 2

    Run it

    • Install the package with npm or yarn.
    • In your page's JSON file, register the component under usingComponents, for example "van-button" pointing to the dist/button/index path.
    • Use the component in your WXML file, for example <van-button type="primary">按钮</van-button>.
    • To preview the example project, run npm install and npm run dev, then open the vant-weapp/example directory in WeChat Developer Tools.
  3. 3

    Get the most out of it

    • Read the documentation site at vant.pro for the full list of components and their options
    • Check the changelog linked in the README when upgrading between versions
    • Use the design resources linked in the README to keep your app visually consistent
    • Install the 0.x version with vant-weapp if you need the older package name

Downloads

Source code (.zip)dev branch · straight from GitHubRelease v1.11.7Release notes and sourceOfficial website & docsvant.pro/vant-weapp/

Strengths

  • Installable through npm or yarn, which the README recommends
  • Has an official documentation site and a demo Mini Program to preview
  • Released under the MIT license, which allows free use and modification

Trade-offs

  • The README notes the public demo Mini Program may not be the latest version because of WeChat review limits
  • Requires knowledge of the WeChat Mini Program framework; the README asks readers to learn it first
  • The README states a minimum base library version of 2.6.5, so older setups may not work

How it compares

ProjectStarsTypeLevelUpdatedBest for
vant-weapp (this)18.5kLibraryintermediate27 days agoDevelopers building WeChat Mini Programs who want ready-made UI components
react252kLibraryintermediate6 days agoDevelopers building interactive web interfaces with JavaScript
react-native-elements25.9kLibraryintermediate6 months agoReact Native developers who want ready-made UI components
SnapKit20.3kLibraryintermediate4 months agoSwift developers building UIKit or AppKit interfaces in code rather than Interface Builder
mpvue20.2kLibraryintermediate4.7 years agoDevelopers who already know Vue.js and want to build WeChat mini programs
tamagui14.3kLibraryintermediate4 days agoTeams building the same app for web and native with React

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.