vantui: a React port of Vant Weapp so Taro apps can share one mobile component set
基于vant-weapp实现的Taro-React版及H5-React版组件库
At a glance
- What is it?
- vantui is a TypeScript component library that ports the Vant Weapp mini program design system to React, so the same components render under Taro on H5, WeChat, Alipay and Douyin mini programs with a consistent API and theme. It is MIT licensed, published as @antmjs/vantui, and its own authors describe it as an extension of Vant Weapp rather than a new design.
- Who is it for?
- vantui fits a Taro team that wants the Vant Weapp look and API on React across mini program targets and H5 from one codebase, and that would rather inherit an existing design system than design a component set from scratch. It does not fit a team outside the Taro and React combination, a project that needs React Native support, or a team that wants its own visual language.
- Can I use it commercially?
- Yes. MIT is a permissive licence: you can use, modify and sell software built on it, as long as you keep its copyright and licence notices.
- Is it still maintained?
- Yes. The repository last received commits 142 days ago.
- What is it written in?
- Mainly TypeScript, according to GitHub's language statistics.
Answers come from the project's GitHub data, last synced on October 22, 2026, and from our analysis. They are not legal advice.
Editorial analysis
A port, not a new design system
vantui is a component library built on top of Vant Weapp, the lightweight and reliable WeChat mini program UI library made by the Youzan team. The README is explicit about the nature of the project: it is not a new wheel, but an extension built on the years of practice accumulated in Vant Weapp, with simple additions that make it usable from Taro and React.
The consistency claim is quantified in the README, and the numbers are the interesting part. It reports 99 percent of the style files migrated, 100 percent converted to React, with as much of the original Youzan JavaScript logic preserved as possible so that there is as little rewriting as possible. It also reports adoption in more than ten projects.
The reason that is possible is described in the background note. The library began as a full compilation of the Vant Weapp code, with all the style files and code structure kept highly consistent with the original, and only the lifecycle adapted so that it works with React. That is a deliberate choice to avoid the problems of reinventing, and it has an obvious consequence: the API surface you get is Vant Weapp's API surface, with React plumbing on top.
The library is MIT licensed and published under the @antmjs scope, with the homepage at antmjs.github.io/vantui. The contributing team is described as the frontend team of the Xiaodian Technology innovation division.
Taro and React as the platform assumptions
The target platforms are stated directly. Taro is the cross-platform framework from the JD team, supporting React, Vue and Nerv for building WeChat, JD, Baidu, Alipay, ByteDance and QQ mini programs, H5 and React Native applications, and vantui supports Taro across H5, WeChat mini programs, Alipay mini programs and Douyin mini programs, with React Native explicitly not supported.
That exclusion matters for planning. Taro can target React Native, so a team that assumed vantui would follow Taro's full platform matrix would find a gap at the last step of a multi-platform plan.
The consistency with Vant Weapp is carried into the API as well as the visuals. The README states that the UI and API are kept as consistent as possible with Vant Weapp, and it names the components as covering more than fifty high quality components for mainstream mobile scenarios.
Two capabilities sit alongside the components. Theme customisation is supported, and on-demand loading is supported, so a bundle does not have to carry every component. The README is also honest about the limit of any component library here: it cannot fully satisfy every individual UI need, so where the look has to differ, the answer is to adjust the theme or to override with class or style.
The monorepo and the release pipeline
The repository is a Lerna monorepo with a packages directory, and the root package.json is where the workflow lives. The engine requirements are Node 16 or newer, npm 8 or newer and yarn 1.22 or newer, and the browserslist covers Chrome from 35, Chrome Android from 35, iOS 8, Safari 8, Android 4.1, QQ Android 4.1 and UC Android 4.1.
The build is driven through Lerna. Building is `npx lerna run build`, testing is `npx lerna run test`, and bootstrapping has a CI variant that pins the npm client to yarn:
"bootstrap:ci": "npx lerna bootstrap --npm-client=yarn",
"bootstrap:lerna": "npx lerna bootstrap",
"bootstrap": "npm-run-all clear-all bootstrap:lerna",
"build": "npx lerna run build",Releasing has three stages, and the ordering is the point. The lerna version step runs with --exact --no-git-tag-version --force-publish, which means every package in the monorepo is versioned identically and bumped in lockstep, and no git tag is created by the version command itself. The changelog is then regenerated with conventional-changelog using the angular preset, writing in place to CHANGELOG.md with a zero prefix, and finally a script named pullRequest.js is executed.
The beta path is separate, using lerna publish with --force-publish, --exact, --skip-temp-tag and a beta preid and npm tag, so a beta is published under its own dist tag and does not move the latest tag.
Around the monorepo sit the usual quality tools: eslint, stylelint with its own ignore file, prettier with an ignore file, husky, lint-staged with its own config, a tsconfig with a base file, and an antm.config.ts. The eslint script runs eslint and then the TypeScript compiler with --skipLibCheck, so type checking is part of the lint pass rather than a separate step.
Releasing by hand, and the documentation split
The release section of the README documents a manual step that sits outside the npm scripts. It says that a temp.js file needs to be created in the root directory, holding a module.exports object with a gitAuth field for the git token and a webhooksToken field for the messaging webhook, and then a release command is run.
That file is the mechanism for opening a pull request as part of the release, which explains the pullRequest.js script in the root package.json and the fact that the release script chains the lerna version step, the changelog regeneration and the pull request script together. The token in temp.js is what allows that script to talk to the hosting platform.
The documentation is published in two places, on GitHub Pages at antmjs.github.io/vantui and on Gitee at antm-js.gitee.io/vantui, and the README links both. The choice of two hosts is a practical one for a Chinese development team, since access to GitHub Pages can be slow or blocked from inside China.
The project also states a limitation about its own artwork. The logo has not yet obtained permission for use, and the README asks that contact be made in case of infringement. That is a small thing, but it is the sort of detail that matters if you are shipping a product built on the library and putting its logo in your marketing.
Where vantui is the wrong choice
The first limitation is the platform box. React Native is out, and anything outside Taro is out. A team on a plain React web application, on Vue, or on a native mobile stack gets nothing here, because the components are built around Taro's mini program targets and the Vant Weapp API.
The second is that the component set is inherited rather than designed for your product. That is the whole point of the port, and it is also the limitation. If your application needs a distinctive look or a different interaction model, the theme customisation and the class or style overrides are your tools, and beyond that you are fighting the design system. A team that already has its own React component library should use it.
The third is the API coupling to Vant Weapp. The consistency is a strength for a team that knows Vant Weapp, because documentation and behaviour transfer directly. For a team that does not, the API is essentially the Vant Weapp API with a React surface, and the vantui documentation assumes you already know what a mini program component library looks like.
The honest comparison is with the alternatives. Using Vant Weapp directly is better if you are building only for WeChat mini programs, because you avoid the port layer entirely. Using Taro's own UI library or an independent React mobile library is better if you need more platforms or a different aesthetic. And if you are on React Native, none of this applies.
The maintenance picture is reasonable rather than fast. The last push was on 2026-06-03, the last release v3.7.2 was on the same day, and the previous one v3.7.1 was on 2026-04-24, with v3.7.0 in September 2025, so the project releases when it has something rather than on a schedule.
Editorial conclusion
vantui fits a Taro team that wants the Vant Weapp look and API on React across mini program targets and H5 from one codebase, and that would rather inherit an existing design system than design a component set from scratch. It does not fit a team outside the Taro and React combination, a project that needs React Native support, or a team that wants its own visual language. Before adopting it, confirm the platform you target is covered, since React Native is explicitly out of scope, check that the component API you need matches Vant Weapp closely enough for the migration to be mechanical, and pin a version, because the last release was v3.7.2 on 2026-06-03 and the project ships from a monorepo whose packages version together.
Frequently asked questions
What is vantui and what is it based on?
vantui is a TypeScript React component library for Taro, built by porting the Vant Weapp mini program library. The README reports 99 percent of the style files migrated and full React conversion, with as much of the original JavaScript logic preserved as possible to keep rewriting to a minimum.
Which platforms does vantui support?
Taro is supported across H5, WeChat mini programs, Alipay mini programs and Douyin mini programs. React Native is explicitly not supported, even though Taro itself can target it, so a plan that includes React Native has a gap.
How is vantui installed and built?
It is published as the @antmjs/vantui package under the MIT licence and consumed through Taro. The repository is a Lerna monorepo where the build runs `npx lerna run build` and the tests run `npx lerna run test`, with Node 16, npm 8 and yarn 1.22 as the stated engine requirements.
How are releases published in the vantui monorepo?
The release script runs the lerna version step with exact versions and force publish, regenerates the changelog with conventional-changelog using the angular preset, and then runs a pull request script. A separate beta path publishes under a beta npm tag, and the root also needs a temp.js file holding a git token and a webhook token.
Can I customise the look of vantui components?
Yes, theme customisation and overriding with class or style are both supported. The README is candid that the component set cannot fully satisfy every individual UI need, so personalisation is expected to happen through the theme or through class and style overrides.
Official sources
Add this badge to your README
If you maintain this project, the badge below links readers to this analysis and shows its maintenance status from the daily GitHub snapshot. Paste the markdown into your README; add ?metric=license or ?metric=stars to the image URL for a different field.
[](https://hysenlabs.com/projects/antmjs-vantui)Was this useful?