Taroify 是移动端组件库 Vant 的 Taro 版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。
npm install taroify
轻量、可靠、面向多端的 Taro React UI 组件库
基于 Vant 设计语言，为小程序与 H5 提供一致、类型安全且高度可定制的开发体验。
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/mcp |
面向 AI 编码助手的文档检索服务 |
本地开发
# 克隆仓库
git clone https://github.com/mallfoundry/taroify.git
cd taroify
# 安装根目录、工作区和官网依赖
yarn run install:node_modules
# 启动 H5 组件示例与文档站点
yarn develop
更多仓库结构、组件开发与提交规范，请阅读 贡献指南。
社区
如果你发现问题、希望增加组件，或对 API 设计有建议，欢迎通过以下方式参与：
加入微信交流群
添加好友时请备注「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