vant-weapp

Provide Vant Weapp UI components for WeChat MiniProgram development.

4|Updated Apr 12, 2026

Search Tags:#ui-components #mini-programs #wechat-miniprogram #component-registration #vant-weapp #wxss-wxml

Ready to run

npx skills add https://github.com/tiantangcao1980-web/DesignDNA-Skills --skill vant-weapp

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: vant-weapp
Source: https://github.com/tiantangcao1980-web/DesignDNA-Skills/tree/main/designdna/skills/vant-weapp
Command: npx skills add https://github.com/tiantangcao1980-web/DesignDNA-Skills --skill vant-weapp

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Vant Weapp skill provides ready-to-use UI components for WeChat MiniPrograms, reducing the effort required to implement native WXML/WXSS interfaces and register components across projects.

Core Features & Use Cases

Catalog of 50+ components including van-button, van-cell, van-grid, van-nav-bar, van-tabs, van-toast, van-dialog, and more for common mobile UI needs.
Clear configuration options for WeChat MiniPrograms: register components in app.json or per-page JSON to enable tree-shaking and optimal build size.
Real-world use: rapidly assemble polished WXML/WXSS UIs without writing equivalent DOM primitives from scratch.

Quick Start

Install the library with npm install @vant/weapp and register components in app.json or per-page JSON, then start using the tag-based components like <van-button> in your pages.

Frequently Asked Questions about vant-weapp

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I add UI components to a WeChat MiniProgram using WXML and WXSS?▼

To add UI components to a WeChat MiniProgram, install the Vant Weapp library via npm and register the desired components in your app.json or per-page JSON files. This enables ready-to-use WXML tags for rapid interface assembly.

What WeChat MiniProgram UI components are available for native development?▼

A catalog of over 50 WeChat MiniProgram UI components is available, including buttons, cells, grids, navigation bars, tabs, toasts, and dialogs. These ready-to-use components cover common mobile interface needs without writing native WXML primitives.

How do I register Vant Weapp components globally in a WeChat MiniProgram?▼

Register Vant Weapp components globally by listing them in the app.json file, or per-page by adding them to individual page JSON files. Proper registration enables tree-shaking and ensures optimal build size for your MiniProgram.

Can I use Vant Weapp components without npm install in native WeChat development?▼

No, you must run npm install @vant/weapp to add the component library to your project before usage. After installation, register the components in your JSON configuration files to start using the tags in your WXML pages.

Do WeChat MiniProgram UI components support rpx-based styling?▼

Yes, Vant Weapp UI components adhere to WeChat MiniProgram standards and support rpx-based styling. This ensures responsive layout adaptation across different screen sizes for native WXML and WXSS interfaces.

What is the best way to reduce build size when using WeChat MiniProgram components?▼

The best way to reduce build size is through proper component registration. By registering components per-page in JSON files rather than globally in app.json, you enable tree-shaking to eliminate unused components from the final build.