<p align="center">
    <img alt="logo" src="https://img11.360buyimg.com/imagetools/jfs/t1/211965/25/7152/22022/61b16785E433119bb/aa41d7a9f7e823f3.png" width="150" style="margin-bottom: 10px;">
</p>

<p align="center">JD-style mobile UI components based on React that support users to develop H5 and mini-programs.</p>

<p align="center">
    <a href="http://makeapullrequest.com">
    <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square" alt="PRs Welcome" />
  </a>
  <a href="https://github.com/jdf2e/nutui-react">
    <img src="https://img.shields.io/npm/l/@nutui/nutui-react.svg" alt="license"/>
  </a>
  <a href="https://www.npmjs.com/package/@nutui/nutui-react">
    <img src="https://img.shields.io/npm/v/@nutui/nutui-react.svg?style=flat-square">
  </a>
  <a href="https://www.npmjs.com/package/@nutui/nutui-react">
    <img src="https://img.shields.io/npm/dt/@nutui/nutui-react.svg?style=flat-square">
  </a>
  <a href="https://github.com/jdf2e/nutui-react">
    <img src="https://img.shields.io/github/contributors/jdf2e/nutui-react" alt="GitHub contributors">
  </a>
  <a href="https://github.com/jdf2e/nutui-react">
    <img src="https://img.shields.io/github/release-date/jdf2e/nutui-react" alt="GitHub Release Date">
  </a>
  <a href="https://github.com/jdf2e/nutui-react">
    <img src="https://img.shields.io/github/commit-activity/w/jdf2e/nutui-react" alt="GitHub commit activity">
   </a>
</p>

<p align='center'>
  <img src="https://img12.360buyimg.com/imagetools/jfs/t1/202336/18/18586/7437/61b832ccE0b13d53d/18605da7232a5a0e.png" height="180" alt="NutUI-React" />  &nbsp;
  <img src="https://img13.360buyimg.com/imagetools/jfs/t1/102323/22/33163/27773/632a7855E75c9fa02/8c351778f47d24f5.jpg" width="200" alt="NutUI-React" />
</p>

---

> Nut[nʌt]: the one Squirrel Scrat pursues resolutely for a lifetime and will never let go even if it causes a catastrophe from the animated film **_Ice Age_**.

[简体中文](./README_ZH.md) | English

## Features

- 🚀 70+ High Quality Components
- 📖 Based on JD APP 11.0 Visual Specifications
- 🍭 Support Tree Shaking
- 📖 Extensive Documentation and Demos
- 💪 Written in TypeScript
- 💪 Support SSR (Experimental)
- 🍭 Support Custom Themes
- 🍭 90%+ Unit Test Coverage
- 📖 Provide Sketch Design Resources

## Running locally

### running with H5

```sh
# Clone repository
git clone https://github.com/jdf2e/nutui-react.git

# Enter the project dictionary
cd nutui-react

# Install dependencies
pnpm install

# Start development
pnpm run dev

# visit in browser: http：http://localhost:3000 (you don't have to open it manually if you've run it in the browser again)
```

### running with Taro

```sh
# Clone the repository
git clone https://github.com/jdf2e/nutui-react.git

# Navigate to the project root directory
cd nutui-react

# Install dependencies
pnpm install

# Enter mini-program development mode
# Taro H5
pnpm dev:taro h5
# WeChat Mini Program
pnpm dev:taro weapp
# JD Mini Program
pnpm dev:taro jd
# For other platforms, refer to the scripts in the package.json file in the demo directory
```

### running with JDTaro

1. Add a .npmrc file in the root directory of the repository with the following configuration:

```shell
git-branch-lockfile=true
```

```sh
# Clone the repository
git clone https://github.com/jdf2e/nutui-react.git

# Navigate to the project root directory
cd nutui-react

# Install dependencies
pnpm install --ignore-pnpmfile

# Enter mini-program development mode
# Taro H5
pnpm dev:jdtaro h5
# WeChat Mini Program
pnpm dev:jdtaro weapp
# JD Mini Program
pnpm dev:jdtaro jd
# harmony cpp
pnpm dev:jdtaro:jdharmonycpp
```

## Build Versions

> If you are using AMD environment or build tools such as Webpack, Vite, etc., we recommend using the `es` version. If it is a non-module environment (such as direct reference through the `<script>` tag), it is recommended to use the `umd` compressed version.

- es **nutui.es.js**

- umd **nutui.umd.js**

## Links

<ul>
    <li>
        <a href="https://github.com/jdf2e/nutui-react/discussions">
            Discussions  (vote with 👍)
        </a>
    </li>
    <li>
        <a href="https://github.com/jdf2e/nutui-react/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22">
            Feature Requests (vote with 👍)
        </a>
    </li>
     <li>
        <a href="https://github.com/jdf2e/nutui-react/labels/bug%203.0">
            Bugs (vote with 👍)
        </a>
    </li>
     <li>
        <a href="https://github.com/jdf2e/nutui-react/issues?q=is%3Aissue+is%3Aopen+label%3Aquestion">
            Question  (vote with 👍)
        </a>
    </li>
</ul>

## Communication

| Version | WeChat Group | JD Dongdong Group |
| --- | --- | --- |
| [NutUI React](https://github.com/jdf2e/nutui-react/issues) | <img src="https://storage.360buyimg.com/imgtools/17c67beff6-4acf07c0-609c-11ed-a6ef-69df15b605e4.png" width="100" /> Reply 「NutUI-React」 after following | 1025679314 |
| [NutUI x Taro](https://github.com/jdf2e/nutui/issues) | <img src="https://camo.githubusercontent.com/db4276b4ee4b443158195e943e9e678cb4d2afb7580f70d4d817ef0a90413aec/687474703a2f2f73746f726167652e333630627579696d672e636f6d2f7461726f2d6a642d636f6d2f7374617469632f636f6e746163745f7461726f5f6e757475695f71722e706e67" width="100" />Reply 「NutUI-React」 after following | 1022545110 |

## Join Us

#### NutUI Community

[_Welcome To NutUI-React Community_](https://github.com/jdf2e/nutui-react/discussions/348)

#### Contribute to NutUI

There are some choices of contributing to NutUI as follows, solving issues, fixing bugs, adding new components, i18n, UI customization, platform and cross-end adaptation, etc.

You are very welcome to contribute code to NutUI. Before your pull requests, please read [_NutUI Developer Contributing Guide_](https://github.com/jdf2e/nutui-react/discussions/348)。

## Issue & Discussion

[Report issues to NutUI](https://nutui.jd.com/nutui-issue-helper/?repo=jdf2e/nutui-react&lang=zh-cn)

> It is highly recommended to read [*How To Ask Questions The Smart Way*](https://github.com/ryanhanwu/, [_How To Ask Questions Of GitHub Community_](https://github.com/seajs/seajs/issues/545) and [_How to Report Bugs Effectively_](https://www.chiark.greenend.org.uk/~sgtatham/bugs.html), then you can get understanding and help more easily.

[NutUI Discussion](https://github.com/jdf2e/nutui-react/discussions)

If you have any ideas, questions or suggestions, you can share your opinions here.

## Contributors

Thanks to all the following [developers](https://github.com/jdf2e/nutui-react/graphs/contributors)。 who have contributed code to NutUI.

<a href="https://github.com/jdf2e/nutui-react/graphs/contributors">
  <img src="https://contrib.rocks/image?repo=jdf2e/nutui-react" alt="contributors"/>
</a>

## Stargazers

[![Stargazers repo roster for @jdf2e/nutui-react](https://reporoster.com/stars/jdf2e/nutui-react)](https://github.com/jdf2e/nutui-react/stargazers)

## Forkers

[![Forkers repo roster for @jdf2e/nutui-react](https://reporoster.com/forks/jdf2e/nutui-react)](https://github.com/jdf2e/nutui-react/network/members)

## Milestones

[Milestones](https://github.com/jdf2e/nutui-react/projects)

## Release Notes

NutUI follows [Angular Style Commit Message Conventions](https://gist.github.com/stephenparish/9941e89d80e2bc58a153). The up-to-date release notes are available on [Release](https://github.com/jdf2e/nutui-react/releases)

## Open Source License

This project is based on **MIT** protocol
