[English](https://github.com/3lang3/react-vant) | 简体中文

<p align="center">
    <img alt="logo" src="https://cdn.jsdelivr.net/gh/3lang3/react-vant@main/public/logo.svg" width="200" style="margin-bottom: 10px;">
</p>

<h1 align="center">React Vant</h1>

<p align="center">📱 一个参照<a href="https://github.com/youzan/vant">Vant</a>打造的 React 框架移动端组件库。</p>

<p align="center">
  <a href="https://npmjs.org/package/react-vant" target="_blank" referrerpolicy="no-referrer">
    <img src="https://img.shields.io/npm/v/react-vant/next?style=flat-square" alt="npm version" />
  </a>
  <a href="https://npmjs.org/package/react-vant" target="_blank" referrerpolicy="no-referrer">
    <img src="https://img.shields.io/npm/dm/react-vant.svg?style=flat-square" alt="npm download" />
  </a>
  <img src="https://img.shields.io/badge/renovate-enabled-brightgreen.svg?style=flat-square" alt="renovate" />
  <a href="https://github.com/3lang3/react-vant/discussions" target="_blank" referrerpolicy="no-referrer">
    <img src="https://img.shields.io/badge/discussions-on%20github-blue?style=flat-square" alt="discussions" />
  </a>
  <a href="https://github.com/3lang3/react-vant/discussions" target="_blank" referrerpolicy="no-referrer">
    <img src="https://img.shields.io/npm/l/react-vant?style=flat-square" alt="license" />
  </a>
</p>

<p align="center">
  🔥 <a href="https://lang3.gitee.io/react-vant">文档网站 (Domestic)</a>
  &nbsp;
  🌈 <a href="https://3lang3.github.io/react-vant">文档网站（GitHub）</a>
</p>

## ✨ 特性

- 🚀 组件平均体积小于 1KB（min+gzip）.
- 💎 60+ 个高质量组件，覆盖移动端主流场景.
- 💪 使用 TypeScript 编写，提供完整的类型定义.
- 📝 提供完善的文档和组件示例.
- 🎨 支持主题定制，内置 700+ 个主题变量.
- 😎 支持按需引入和 Tree Shaking.
- ⚡️ 支持 [Vite](https://github.com/3lang3/react-vant-template/tree/main/template/vite)和 Parcel@2.
- 🌵 现代浏览器
- 🌝 支持 SSR([nextjs](https://github.com/3lang3/react-vant-template/tree/main/next/nextjs), [remix](https://github.com/3lang3/react-vant-template/tree/main/next/remix)).

## 🖥 环境支持

| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br> Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/a94987f29719142668cdf960b3f624ce1a3c6aa8/src/safari-ios/safari-ios.svg" alt="Safari for iOS" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari |
| --- | --- | --- | --- |

支持现代浏览器和 Chrome >= 51，iOS >= 10.0。

## 📱 预览

手机扫描上的二维码访问演示：

<img src="https://github.com/3lang3/react-vant/blob/main/public/preview_qrcode.png?raw=true" width="200" />

<details>
  <summary>查看部分截图</summary>
  <img src="https://pic.stackoverflow.wiki/uploadImages/222/66/151/135/2021/11/17/17/17/c6034f01-b534-4e01-9b43-d28259ea77ea.png" width="200" />
  <img src="https://pic.stackoverflow.wiki/uploadImages/222/66/151/135/2021/11/17/17/17/b8c56952-943b-4e8e-b4cb-274d5ac62f7b.png" width="200" />
  <img src="https://pic.stackoverflow.wiki/uploadImages/222/66/151/135/2021/11/17/17/17/20a5ea40-6470-4156-b244-a4cbd8cef9d2.png" width="200" />
  <img src="https://pic.stackoverflow.wiki/uploadImages/222/66/151/135/2021/11/17/17/17/9cd23768-e2d5-45c7-b80b-be6367c157b9.png" width="200" />
  <img src="https://pic.stackoverflow.wiki/uploadImages/222/66/151/135/2021/11/17/17/17/87f8d07c-bdeb-46de-b64a-eaf78f062c6a.png" width="200" />
  <img src="https://pic.stackoverflow.wiki/uploadImages/222/66/151/135/2021/11/17/17/17/e8cf6bdd-96b3-4d89-84af-606ab443a6fd.png" width="200" />
  <img src="https://pic.stackoverflow.wiki/uploadImages/222/66/151/135/2021/11/17/17/17/02abb81a-4c80-4468-815f-b11076b16524.png" width="200" />
  <img src="https://pic.stackoverflow.wiki/uploadImages/222/66/151/135/2021/11/17/17/17/ecf39bd8-f933-4f62-89b2-574845696bc0.png" width="200" />
  <img src="https://pic.stackoverflow.wiki/uploadImages/222/66/151/135/2021/11/17/17/17/6e2800b6-1675-467d-be48-f5e876c19e0f.png" width="200" />
</details>

## 📦 安装

推荐 **锁定** 版本:

```bash
# npm
npm i react-vant@next -S -E

# pnpm
pnpm i react-vant@next -S -E
```

## 🚀 快速开始

以下是 react-vant 的一些代码示例：

#### 代码片段:

```jsx
import ReactDOM from 'react-dom';
import { Button } from 'react-vant';

function App() {
  return <Button>Default Button</Button>;
}

ReactDOM.render(<App />, mountNode);
```

#### 代码示例:

- [Create React App](https://github.com/3lang3/react-vant-template/tree/main/next/cra)
- [Umi](https://github.com/3lang3/react-vant-template/tree/main/next/umijs)
- [Next.js](https://github.com/3lang3/react-vant-template/tree/main/next/nextjs)
- [Remix](https://github.com/3lang3/react-vant-template/tree/main/next/remix)
- [Vite](https://github.com/3lang3/react-vant-template/tree/main/next/vite)

更多信息请参考[快速开始](https://3lang3.github.io/react-vant/#/zh-CN/).

## 🤝 贡献

阅读我们的贡献指南，让我们一起构建更好的 `react-vant`。

我们欢迎所有贡献。 请先阅读我们的 [CONTRIBUTING.md](https://3lang3.github.io/react-vant/#/zh-CN/contribution)。 您可以将任何想法作为拉取请求或作为 GitHub 问题提交 😃。

## 💭 讨论

<img alt="WechatIMG21.jpeg" src="https://user-images.githubusercontent.com/7098719/143408499-6e838945-9fc3-4b4d-bf8f-f262f4937c33.jpg" width="200"  />

## 👥 贡献者

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
  <tr>
    <td align="center"><a href="https://github.com/0x219"><img src="https://avatars.githubusercontent.com/u/50414099?v=4?s=100" width="100px;" alt=""/><br /><sub><b>0x219</b></sub></a><br /><a href="https://github.com/3lang3/react-vant/commits?author=0x219" title="Code">💻</a> <a href="https://github.com/3lang3/react-vant/commits?author=0x219" title="Documentation">📖</a> <a href="#maintenance-0x219" title="Maintenance">🚧</a></td>
    <td align="center"><a href="https://github.com/TinsFox"><img src="https://avatars.githubusercontent.com/u/33956589?v=4?s=100" width="100px;" alt=""/><br /><sub><b>TinsFox</b></sub></a><br /><a href="https://github.com/3lang3/react-vant/commits?author=TinsFox" title="Code">💻</a> <a href="https://github.com/3lang3/react-vant/commits?author=TinsFox" title="Documentation">📖</a> <a href="#maintenance-TinsFox" title="Maintenance">🚧</a></td>
    <td align="center"><a href="https://github.com/sethyuan"><img src="https://avatars.githubusercontent.com/u/3410293?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Seth Yuan</b></sub></a><br /><a href="https://github.com/3lang3/react-vant/commits?author=sethyuan" title="Code">💻</a></td>
    <td align="center"><a href="https://github.com/union-mall"><img src="https://avatars.githubusercontent.com/u/82643376?v=4?s=100" width="100px;" alt=""/><br /><sub><b>union-mall</b></sub></a><br /><a href="https://github.com/3lang3/react-vant/commits?author=union-mall" title="Code">💻</a></td>
    <td align="center"><a href="https://github.com/tgioer"><img src="https://avatars.githubusercontent.com/u/18252854?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Tang Zhi</b></sub></a><br /><a href="https://github.com/3lang3/react-vant/commits?author=tgioer" title="Code">💻</a></td>
    <td align="center"><a href="https://github.com/yuegongzi"><img src="https://avatars.githubusercontent.com/u/13476544?v=4?s=100" width="100px;" alt=""/><br /><sub><b>yuegongzi</b></sub></a><br /><a href="https://github.com/3lang3/react-vant/commits?author=yuegongzi" title="Code">💻</a> <a href="https://github.com/3lang3/react-vant/commits?author=yuegongzi" title="Documentation">📖</a></td>
    <td align="center"><a href="https://github.com/ovensi"><img src="https://avatars.githubusercontent.com/u/24306930?v=4?s=100" width="100px;" alt=""/><br /><sub><b>周神</b></sub></a><br /><a href="https://github.com/3lang3/react-vant/commits?author=ovensi" title="Code">💻</a></td>
  </tr>
  <tr>
    <td align="center"><a href="https://github.com/BiscuitCoder"><img src="https://avatars.githubusercontent.com/u/17230944?v=4?s=100" width="100px;" alt=""/><br /><sub><b>BiscuitCoder</b></sub></a><br /><a href="#design-BiscuitCoder" title="Design">🎨</a></td>
    <td align="center"><a href="https://renovate.whitesourcesoftware.com/"><img src="https://avatars.githubusercontent.com/u/25180681?v=4?s=100" width="100px;" alt=""/><br /><sub><b>WhiteSource Renovate</b></sub></a><br /><a href="https://github.com/3lang3/react-vant/commits?author=renovate-bot" title="Documentation">📖</a> <a href="#security-renovate-bot" title="Security">🛡️</a> <a href="#tool-renovate-bot" title="Tools">🔧</a></td>
    <td align="center"><a href="https://github.com/apps/allcontributors"><img src="https://avatars.githubusercontent.com/in/23186?v=4?s=100" width="100px;" alt=""/><br /><sub><b>allcontributors[bot]</b></sub></a><br /><a href="#tool-allcontributors[bot]" title="Tools">🔧</a></td>
    <td align="center"><a href="https://github.com/apps/dependabot"><img src="https://avatars.githubusercontent.com/in/29110?v=4?s=100" width="100px;" alt=""/><br /><sub><b>dependabot[bot]</b></sub></a><br /><a href="https://github.com/3lang3/react-vant/commits?author=dependabot[bot]" title="Documentation">📖</a> <a href="#security-dependabot[bot]" title="Security">🛡️</a></td>
    <td align="center"><a href="https://github.com/AdonLee"><img src="https://avatars.githubusercontent.com/u/5396468?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Cedong.Lee</b></sub></a><br /><a href="https://github.com/3lang3/react-vant/issues?q=author%3AAdonLee" title="Bug reports">🐛</a></td>
    <td align="center"><a href="https://github.com/hongmaoxiao/myblog/issues"><img src="https://avatars.githubusercontent.com/u/3943494?v=4?s=100" width="100px;" alt=""/><br /><sub><b>xiaomao Feng</b></sub></a><br /><a href="https://github.com/3lang3/react-vant/issues?q=author%3Ahongmaoxiao" title="Bug reports">🐛</a></td>
    <td align="center"><a href="https://github.com/xiaojingyuaner"><img src="https://avatars.githubusercontent.com/u/24470322?v=4?s=100" width="100px;" alt=""/><br /><sub><b>xiaojingyuaner</b></sub></a><br /><a href="https://github.com/3lang3/react-vant/issues?q=author%3Axiaojingyuaner" title="Bug reports">🐛</a></td>
  </tr>
  <tr>
    <td align="center"><a href="https://www.keep-wan.me"><img src="https://avatars.githubusercontent.com/u/19300142?v=4?s=100" width="100px;" alt=""/><br /><sub><b>keep_wan</b></sub></a><br /><a href="https://github.com/3lang3/react-vant/issues?q=author%3Awhevether" title="Bug reports">🐛</a></td>
    <td align="center"><a href="https://blog.csdn.net/weixin_42755677"><img src="https://avatars.githubusercontent.com/u/42933010?v=4?s=100" width="100px;" alt=""/><br /><sub><b>zhangYin</b></sub></a><br /><a href="https://github.com/3lang3/react-vant/issues?q=author%3Amytheart" title="Bug reports">🐛</a> <a href="#ideas-mytheart" title="Ideas, Planning, & Feedback">🤔</a></td>
    <td align="center"><a href="https://www.itworker.cn"><img src="https://avatars.githubusercontent.com/u/12168991?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Yann</b></sub></a><br /><a href="https://github.com/3lang3/react-vant/issues?q=author%3Afeifanshijie" title="Bug reports">🐛</a></td>
    <td align="center"><a href="https://github.com/feifaneric"><img src="https://avatars.githubusercontent.com/u/52685056?v=4?s=100" width="100px;" alt=""/><br /><sub><b>feifaneric</b></sub></a><br /><a href="https://github.com/3lang3/react-vant/issues?q=author%3Afeifaneric" title="Bug reports">🐛</a></td>
  </tr>
</table>

<!-- markdownlint-restore -->
<!-- prettier-ignore-end -->

<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

## 🙏 鸣谢

[Vant](https://github.com/youzan/vant) - Thanks to the Vant team for years of continuous maintenance, allowing me to stand on the shoulders of giants.

[Zan Design](https://design.youzan.com/) - Thanks for the careful production of YouZan Design Experience Center.

## 📜 许可证

[MIT](./LICENSE) ⓒ 3lang3
