Taro UI
UI 库活跃维护基于 Taro 框架开发的多端 UI 组件库，由京东凹凸实验室维护，提供 60+ 高质量组件，支持微信/支付宝/百度小程序 + H5 多端运行，React/Vue 双支持。
★ 4,720🕒 最近更新 2026-07
Taro UITaroReactVueUI组件库跨端京东开源
特性
- 京东凹凸实验室官方维护
- 60+ 高质量组件（At 前缀命名体系）
- 基于 Taro 框架，React/Vue 双支持
- 微信/支付宝/百度小程序 + H5 多端运行
- TypeScript 类型定义支持
- 主题定制（SCSS 变量覆盖）
- 按需引入（babel-plugin-import）
详细文档
Taro UI — 基于 Taro 框架的多端 UI 组件库#
资源概述#
Taro UI 是由京东凹凸实验室（AOTU Labs）开发和维护的多端 UI 组件库，基于 Taro 框架构建。提供 60+ 以 At 为前缀的高质量组件，支持使用 React 或 Vue 开发微信/支付宝/百度小程序 + H5 应用。作为 Taro 生态最早的 UI 库之一，Taro UI 在京东系技术栈中有广泛应用。
GitHub: jd-opensource/taro-ui ⭐ 4,720 / Fork 738 / MIT License npm: taro-ui v3.4.0 / 101 versions / 2026-07-13 modified 最近更新: 2026-07-13（v3.4.0 发布）
设计规范#
At 前缀命名体系#
Taro UI 所有组件统一使用 At 前缀命名（如 AtButton、AtInput、AtCard），避免与其他组件库命名冲突。
组件分类#
| 类别 | 组件 |
|---|---|
| 基础组件 | AtButton, AtIcon, AtTag, AtBadge, AtAvatar, AtDivider |
| 表单组件 | AtForm, AtInput, AtTextarea, AtCheckbox, AtRadio, AtSwitch, AtRate, AtSlider, AtStepper, AtSearchBar |
| 布局组件 | AtCard, AtGrid, AtList, AtAccordion, AtCollapse, AtWaterMark |
| 导航组件 | AtNavBar, AtTabBar, AtTabs, AtSegmentedControl, AtPagination, AtSteps |
| 反馈组件 | AtModal, AtActionSheet, AtToast, AtMessage, AtActivityIndicator, AtLoadMore, AtSkeleton |
| 展示组件 | AtTimeline, AtProgress, AtCircle, AtCountUp, AtCurtain, AtCalendar, AtCountdown, AtFloatButton, AtFab |
| 交互组件 | AtDrawer, AtSwipeAction, AtImagePicker |
主题系统#
- SCSS 变量覆盖（
$color-primary、$color-success、$color-warning、$color-error） - 全局样式引入：
import 'taro-ui/dist/style/index.scss' - 支持自定义变量覆盖
审核规范#
Taro UI 为标准 UI 组件库，构建产物为各平台原生小程序代码，不涉及特殊审核要求。注意：
- 组件不涉及隐私 API 调用
- 无 WebView 外部链接（需自行控制使用方式）
- 图片选择器涉及用户相册权限，需在 app.json 声明
开发指南#
安装#
# 安装 Taro CLI（如未安装）
npm install -g @tarojs/cli
# 创建 Taro 项目
npm create taro-app my-app
# 安装 Taro UI
cd my-app
npm install taro-ui
基本使用#
import React from 'react'
import { View } from '@tarojs/components'
import { AtButton, AtInput, AtCard } from 'taro-ui'
import 'taro-ui/dist/style/index.scss' // 全量引入样式
export default function App() {
const [value, setValue] = React.useState('')
return (
<View>
<AtCard title='用户信息'>
<AtInput
name='username'
title='用户名'
type='text'
placeholder='请输入用户名'
value={value}
onChange={setValue}
/>
</AtCard>
<AtButton type='primary' onClick={() => console.log('clicked')}>
提交
</AtButton>
</View>
)
}
按需引入（推荐）#
// babel.config.js
module.exports = {
presets: [['taro', { /* ... */ }]],
plugins: [
['import', {
libraryName: 'taro-ui',
customName: (name) => `taro-ui/es/components/${name.replace(/^at-/, '')}`,
style: (name) => `${name}/style/css`,
}, 'taro-ui']
]
}
常见陷阱#
- 必须引入样式：忘记
import 'taro-ui/dist/style/index.scss'会导致组件无样式 - ReactNative 不支持：Taro UI 目前不支持 RN 端，仅限小程序 + H5
- Taro 版本兼容：Taro UI 3.x 需要 Taro 3.0+ 版本，Taro 1.x/2.x 不兼容
- 样式覆盖优先级：自定义 SCSS 变量需在 taro-ui 样式之前引入，否则可能不生效
- 557 open issues：社区有较多未处理 issue，复杂场景可能需要自行查源码
- Taro UI 3 vs NutUI：京东系目前主推 NutUI（支持 React/Vue + 更多端），Taro UI 更新频率较低
生态资源#
| 资源 | 说明 |
|---|---|
| Taro 框架 | 跨端开发框架，Taro UI 的基础设施 |
| Taro UI 文档 | 官方组件文档和示例 |
| Taro UI Demo | 官方示例项目源码 |
| NutUI | 京东系新一代 UI 库（Vue3），更活跃 |
| Taroify | Vant 的 Taro React 版本（社区方案） |
| AntmJS/vantui | VantWeapp 的 Taro React 版本 |
| Taro 物料市场 | Taro 生态插件和模板 |
版本更新#
- v3.4.0（2026-07-13）：最新发布版本，包含 CI/CD 修复和 stylelint 兼容性改进
- npm 历史：101 个版本，持续迭代
- GitHub 活跃度：2026-07-13 最后推送，维护频率较低（主要 bugfix 和 CI 修复）
- 发展趋势：Taro UI 作为 Taro 生态早期 UI 库地位稳固，但京东内部新项目更多采用 NutUI。社区活跃度中等，557 个 open issues 反映维护压力大。对于新项目建议评估 NutUI 或 Taroify 是否更适合。
