Taroify is a React mobile component library for the Taro framework that gives developers a Vant-compatible UI toolkit for building mini-programs and H5 applications.

What it is

Taroify is the Taro React edition of the mobile component library Vant, built on the same visual specification and providing a largely consistent API so developers can move between the two with little friction. It is written in TypeScript with complete type definitions, ships more than 70 components covering mainstream mobile scenarios, and is organised as a monorepo whose capabilities are published as separate installable packages: @taroify/core for the core UI components and theme system, @taroify/icons for icon components, @taroify/hooks for React hooks aimed at component and business scenarios, @taroify/commerce for e-commerce extensions, @taroify/cli for an offline component-knowledge CLI with MCP and Agent Skill support, and @taroify/mcp for a standalone MCP service.

The concrete problem it addresses is the gap that opens when a team wants Vant's design language inside a Taro project targeting mini-programs and H5 at once: Vant itself is Vue-based and Vant Weapp is a separate WeChat mini-program build, so React teams using Taro would otherwise have to assemble their own component layer or adopt a library with a different look and API. Taroify replaces that gap by offering the same design specification with a React API that works across mini-program and H5 targets, while keeping components lightweight — an average size below 1KB minified and gzipped — with on-demand importing and Tree Shaking to keep build output small.

Key capabilities

• More than 70 components covering mainstream mobile scenarios, including commerce-oriented extensions in @taroify/commerce.
• Full TypeScript source with complete type definitions across the packages.
• Theme customisation driven by more than 700 built-in theme variables.
• On-demand importing and Tree Shaking, with a recommended automatic on-demand configuration for smaller build output.
• Unit test coverage above 90 percent as a stability guarantee.
• Per-component style entry points, imported individually such as @taroify/core/button/style.
• Separate packages for icons (@taroify/icons), React hooks (@taroify/hooks), a CLI with MCP and Agent Skill (@taroify/cli), and a standalone MCP service (@taroify/mcp).

Who uses it and how

• Frontend developers adding UI to an existing Taro project by installing @taroify/core and importing components such as Button directly in TSX files.
• Teams shipping both mini-program and H5 builds from one codebase who need consistent components and API across targets.
• Organisations building e-commerce interfaces that need the core components plus the @taroify/commerce extension package.
• Contributors running the monorepo locally with pnpm run install:node_modules and pnpm develop to launch the H5 component examples and documentation site.
• Integrators wiring component knowledge into agent tooling through @taroify/cli and @taroify/mcp.

Getting started

Install the core package in an existing project with npm install @taroify/core (or the equivalent yarn add / pnpm add), then import a component and its style entry point such as import { Button } from "@taroify/core" and import "@taroify/core/button/style".

How it compares

Among the tools named alongside it, Taroify occupies the position that React Vant holds for plain React mobile development and Vant Weapp holds for WeChat mini-programs, but it is the one designed specifically for Taro React projects spanning mini-program and H5 targets. It credits Vant's design specification and component experience as its basis while distinguishing itself through Taro multi-end support and TypeScript-first typing.

When to use it — and when not to

It suits Taro React teams that want Vant's visual language and near-identical APIs without maintaining a Vue or Vant Weapp codebase alongside their app. Documentation and component examples are published in Chinese, which is a real consideration for teams working primarily in English, and the project carries 18 open issues, so a self-hoster evaluating it should review issue activity and the changelog at taroify.com before committing. Its MIT licence, 1098 stars, and a recent last push on 2026-10-03 suggest active maintenance rather than abandonment.

npm install @taroify/core

yarn add @taroify/core

pnpm add @taroify/core

import { Button } from "@taroify/core"
import "@taroify/core/button/style"

export default function Index() {
  return <Button color="primary">开始使用 Taroify</Button>
}

# 克隆仓库
git clone https://github.com/taroify/taroify.git
cd taroify

# 安装根目录、工作区和官网依赖
pnpm run install:node_modules

# 启动 H5 组件示例与文档站点
pnpm develop