轻量、可靠、面向多端的 Taro React UI 组件库

基于 Vant 设计语言，为小程序与 H5 提供一致、类型安全且高度可定制的开发体验。

官网 · 快速上手 · 在线演示 · CLI / MCP · 讨论区

---

Taroify 是什么

Taroify 是移动端组件库 Vant 的 Taro React 版本，两者基于相同的视觉规范，提供近似一致的 API 接口，助力开发者快速搭建小程序应用。

✨ 特性

• 🚀 性能极佳，组件平均体积小于 1KB（min+gzip）
• 💎 70+ 个高质量组件，覆盖移动端主流场景
• 💪 使用 TypeScript 编写，提供完整的类型定义
• 💪 单元测试覆盖率超过 90%，提供稳定性保障
• 📖 提供完善的中文文档和组件示例
• 🍭 支持 React
• 🍭 支持主题定制，内置 700+ 个主题变量
• 🍭 支持按需引入和 Tree Shaking

浏览器支持

支持现代浏览器以及 Chrome >= 51、iOS >= 10.0。

安装

在现有项目中使用 Taroify 时，可以通过 npm 进行安装

快速开始

安装

npm install @taroify/core

也可以使用 Yarn 或 pnpm：

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>
}

推荐配置自动按需引入，以获得更简洁的源码和更小的构建产物。完整配置请查看 快速上手。

Packages

Taroify 采用 Monorepo 组织，各能力可以独立安装和组合：

Package	说明
@taroify/core	核心 UI 组件与主题系统
@taroify/icons	Taro React 图标组件
@taroify/hooks	面向组件与业务场景的 React Hooks
@taroify/commerce	电商场景扩展组件
@taroify/cli	离线组件知识 CLI、MCP 与 Agent Skill
@taroify/mcp	现有独立 MCP 服务

本地开发

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

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

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

更多仓库结构、组件开发与提交规范，请阅读 贡献指南。

社区

如果你发现问题、希望增加组件，或对 API 设计有建议，欢迎通过以下方式参与：

• 提交 Issue
• 发起 Pull Request
• 参与 Discussions
• 查看更新日志

加入微信交流群

添加好友时请备注「taroify」，通过后邀请进群。

贡献者

感谢每一位为 Taroify 提交代码、文档、设计、Issue 与建议的贡献者。

部分图形设计来自 @BiscuitCoder。

生态与致谢

Taroify 的设计规范与大量组件经验来自 Vant。感谢 Vant 团队 多年来对移动端组件生态的持续投入，也感谢 JetBrains 为开源项目提供开发工具支持。

Vant 官方生态

项目	描述
Vant	Vant Vue 版
Vant Weapp	Vant 微信小程序版
Vant Demo	Vant 官方示例合集
Vant CLI	开箱即用的组件库搭建工具
Vant Icons	Vant 图标库
Vant Touch Emulator	桌面端触摸事件模拟工具

社区生态与友情推荐

项目	描述
React Vant	参照 Vant 打造的 React 移动端组件库
mockm	面向前端开发的接口模拟工具
taro-hooks	为 Taro 设计的 Hooks Library
tarojs-router-next	提供类型提示与参数能力的 Taro 路由库

支持者

感谢 @Yorksh1re、 @akazwz、 @Yang、 @coderYarn、 @蔡包、 @王昆 以及所有支持 Taroify 的开发者。

License

MIT © Taroify Contributors