Introducing Taro UI: A Multi‑Platform UI Component Library for Taro

Taro UI is a UI component library created by Aotu Lab for the Taro multi‑end development framework, aiming to provide a high‑quality, easy‑to‑use set of components that run on WeChat mini‑programs, H5, and ReactNative.

Features

Simple to use : supports npm installation and automatic dependency handling.

Framework support : built on Taro and integrates seamlessly.

Multi‑platform adaptation : a single component works on mini‑programs, H5, and ReactNative.

Beautiful style : designed by the AT‑UI designer for modern flat aesthetics.

Rich component set : covers most common scenarios.

On‑demand import : import only the components you need to keep bundle size minimal.

Multiple themes : several built‑in theme colors (available from version 1.1).

Quick Start

Install Taro CLI

$ npm install -g @tarojs/cli
$ yarn global add @tarojs/cli

Initialize a project

$ taro init myApp

Install Taro UI

$ cd myApp
$ npm i taro-ui

Use the components

Import the component in your code and follow the documentation.

import { AtButton } from 'taro-ui'

Example

Add the following code to /myApp/src/pages/index/index.jsx:

import Taro, { Component, Config } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtButton } from 'taro-ui'
import './index.scss'

export default class Index extends Component {
  config: Config = {
    navigationBarTitleText: '首页'
  }
  render () {
    return (
      <View className='index'>
        <AtButton type='primary'>按钮文案</AtButton>
      </View>
    )
  }
}

Compile and preview

Run the appropriate npm script or npx command for the target platform.

# WeChat mini‑program preview
$ npm run dev:weapp
# or
$ taro build --type weapp --watch
# H5 preview
$ npm run dev:h5
# or
$ taro build --type h5 --watch

Feedback

Issues and suggestions can be submitted on the GitHub repository.