介绍

logo

轻量、可靠、面向多端的 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
yarn
pnpm
npm install @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/iconsTaro 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

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

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

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

社区

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

加入微信交流群
Taroify 微信交流群

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

贡献者

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

contributors

部分图形设计来自 @BiscuitCoder

生态与致谢

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

Vant 官方生态
项目描述
VantVant Vue 版
Vant WeappVant 微信小程序版
Vant DemoVant 官方示例合集
Vant CLI开箱即用的组件库搭建工具
Vant IconsVant 图标库
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