<p>&lt;p align=&quot;center&quot;&gt;
  &lt;a href=&quot;<a href="https://rsuitejs.com">https://rsuitejs.com</a>&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;
   &lt;img src=&quot;<a href="https://user-images.githubusercontent.com/1203827/65102389-7be3f100-d9fd-11e9-859e-ae9617ed2f91.png">https://user-images.githubusercontent.com/1203827/65102389-7be3f100-d9fd-11e9-859e-ae9617ed2f91.png</a>&quot; alt=&quot;React Suite logo&quot;&gt;
  &lt;/a&gt;
&lt;/p&gt;

</p>
<p><a href="https://www.npmjs.com/package/rsuite"><img src="https://img.shields.io/npm/v/rsuite" alt="npm"></a>
<a href="https://codecov.io/gh/rsuite/rsuite"><img src="https://codecov.io/gh/rsuite/rsuite/branch/main/graph/badge.svg?token=HGeKd0BD3t" alt="codecov"></a>
<a href="https://discord.gg/R8mnjwh"><img src="https://img.shields.io/badge/Discord-Join%20chat%20%E2%86%92-738bd7.svg" alt="Discord"></a>
<a href="https://gitter.im/rsuite/rsuite?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge"><img src="https://img.shields.io/gitter/room/rsuite/rsuite?label=chat-english" alt="Gitter"></a>
<a href="https://gitter.im/rsuite/rsuite-CN?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge"><img src="https://img.shields.io/gitter/room/rsuite/rsuite?label=chat-chinese" alt="Gitter"></a></p>
<p>React Suite 是一套 React 组件库，为后台产品而生。同时也是一个具有贴心设计以及对开发者友好的 UI 框架。</p>
<h3 id="ui-design">UI Design</h3>
<p>React Suite 设计原型与规范， <a href="https://rsuitejs.com/design/default">点击查看</a>。</p>
<h2 id="支持的平台">支持的平台</h2>
<h3 id="浏览器">浏览器</h3>
<p>React Suite 支持最新的，稳定版的全部主流浏览器和平台。 从 React Suite 5 开始不支持 IE10 以下版本(包括 IE10)。不推荐在移动端使用。</p>
<table>
<thead>
<tr>
<th>IE</th>
<th>Edge</th>
<th>Firefox</th>
<th>Chrome</th>
<th>Safari</th>
</tr>
</thead>
<tbody><tr>
<td>&gt;=11</td>
<td>&gt;=14</td>
<td>&gt;= 45</td>
<td>&gt;= 49</td>
<td>&gt;= 10</td>
</tr>
</tbody></table>
<h3 id="服务端">服务端</h3>
<p>React Suite 支持服务端渲染， 支持通过 <a href="https://github.com/zeit/next.js">Next.js</a> 构建应用。</p>
<h2 id="支持的开发环境">支持的开发环境</h2>
<ul>
<li>支持 React 16 +</li>
<li>支持 <a href="http://www.typescriptlang.org/">TypeScript</a></li>
<li>支持 <a href="https://electronjs.org/">Electron</a></li>
</ul>
<h2 id="安装">安装</h2>
<p>React Suite 可通过 <a href="https://www.npmjs.com/package/rsuite">npm</a> 安装。</p>
<pre><code class="language-bash">npm i rsuite --save
</code></pre>
<h2 id="使用">使用</h2>
<p>这里有一个简单的示例：</p>
<pre><code class="language-jsx">import { Button } from &#39;rsuite&#39;;
import &#39;rsuite/styles/index.less&#39;; // or &#39;rsuite/dist/rsuite.min.css&#39;
function App() {
  return &lt;Button appearance=&quot;primary&quot;&gt;Hello World&lt;/Button&gt;;
}
</code></pre>
<p>您可以在 <a href="https://codesandbox.io/s/rsuite-template-5vq6zo2z5l">CodeSandbox</a> 上查看该示例。</p>
<h3 id="文档">文档</h3>
<p>您可以阅读<a href="https://rsuitejs.com/guide/introduction">完整文档</a>，或者从下面几个章节开始学习</p>
<ul>
<li><a href="https://rsuitejs.com/guide/introduction">如何使用？</a></li>
<li><a href="https://rsuitejs.com/guide/customization">自定义主题</a></li>
<li><a href="https://rsuitejs.com/guide/intl">国际化</a></li>
<li><a href="https://rsuitejs.com/guide/intl">Right-to-left</a></li>
<li><a href="https://rsuitejs.com/components/overview">组件</a></li>
</ul>
<p>&lt;details&gt;
&lt;summary&gt;更多的示例&lt;/summary&gt;

</p>
<ul>
<li><a href="https://github.com/rsuite/rsuite-management-system">管理系统</a></li>
<li><a href="https://github.com/rsuite/rsuite/tree/master/examples/with-babel-preset-rsuite">模块化按需加载</a></li>
<li><a href="https://github.com/rsuite/rsuite/tree/master/examples/cdn">CDN 引入</a></li>
<li><a href="https://github.com/rsuite/rsuite/tree/master/examples/custom-i18n">国际化方案</a></li>
<li><a href="https://github.com/rsuite/rsuite/tree/master/examples/custom-multiple-themes">多主题方案</a></li>
<li><a href="https://github.com/rsuite/rsuite/tree/master/examples/with-rtlcss">RTL 方案 - rtlcss</a></li>
<li><a href="https://github.com/rsuite/rsuite/tree/master/examples/with-postcss-rtl">RTL 方案 - postcss-rtl</a></li>
<li><a href="https://github.com/rsuite/rsuite/tree/master/examples/create-react-app">在 create-react-app 中使用</a></li>
<li><a href="https://github.com/rsuite/rsuite/tree/master/examples/with-electron">在 Electron 中使用</a></li>
<li><a href="https://github.com/rsuite/rsuite/tree/master/examples/with-flow">在 Flow 中使用</a></li>
<li><a href="https://github.com/rsuite/rsuite/tree/master/examples/with-typescript">在 TypeScript 中使用</a></li>
<li><a href="https://github.com/rsuite/rsuite/tree/master/examples/with-nextjs">在 Next.js 中使用</a></li>
<li><a href="https://github.com/rsuite/rsuite/tree/master/examples/with-nextjs-typescript">在 Next.js 和 Typescript 中使用 </a></li>
<li><a href="https://github.com/rsuite/rsuite/tree/master/examples/with-umi">在 UmiJS 中使用</a></li>
<li><a href="https://github.com/rsuite/rsuite/tree/master/examples/with-snowpack">在 Snowpack 中使用</a></li>
<li><a href="https://github.com/rsuite/rsuite/tree/master/examples/with-vite">在 Vite 中使用</a><p>&lt;/details&gt;</p>
</li>
</ul>
<h2 id="历史版本">历史版本</h2>
<p>上个大版本 4.x 将不再添加新特性，
我们推荐你升级到最新的 5.x 版本。
4.x 的功能修复仍会在一段时间内提供支持，
安全修复也会支持，直到 6.x 开始开发。</p>
<h3 id="历史版本的文档">历史版本的文档</h3>
<ul>
<li><a href="https://v4.rsuitejs.com/">4.x 版本文档</a></li>
<li><a href="https://v3.rsuitejs.com/">3.x 版本文档</a></li>
</ul>
<h2 id="更新日志">更新日志</h2>
<p>每一个版本的详细变化记录在<a href="https://github.com/rsuite/rsuite/releases">Release Notes</a></p>
<h2 id="贡献">贡献</h2>
<p>在开始之前，确保您已读<a href="https://github.com/rsuite/rsuite/blob/master/CONTRIBUTING.zh-CN.md">贡献指南</a>。</p>
<h2 id="支持-react-suite">支持 React Suite</h2>
<p>如果您喜欢 React Suite，可以通过以下方式支持我们：</p>
<ul>
<li>Star 这个项目。</li>
<li>如果您在您的项目中使用了 React Suite，欢迎在这里<a href="https://github.com/rsuite/rsuite/issues/11">留言</a>！</li>
<li>在 <a href="https://opencollective.com/rsuite#">OpenCollective</a> 上赞助我们。</li>
</ul>
<p>这个项目的存在归功于所有贡献者。</p>
<p>&lt;a href=&quot;<a href="https://github.com/rsuite/rsuite/graphs/contributors">https://github.com/rsuite/rsuite/graphs/contributors</a>&quot; target=&quot;_blank&quot;&gt;
  &lt;img src=&quot;<a href="https://contrib.rocks/image?repo=rsuite/rsuite">https://contrib.rocks/image?repo=rsuite/rsuite</a>&quot; /&gt;
&lt;/a&gt;

</p>
<p><a href="https://opencollective.com/rsuite"><img src="https://opencollective.com/rsuite/tiers/backer.svg?avatarHeight=36" alt="opencollective-now"></a></p>
<p>国内交流群, 添加 React Suite 小助手，备注 rsuite， 邀请入群。</p>
<p>&lt;img src=&quot;<a href="https://user-images.githubusercontent.com/1203827/51657342-7ace0180-1fdf-11e9-9237-5d19c7a5c7da.jpeg">https://user-images.githubusercontent.com/1203827/51657342-7ace0180-1fdf-11e9-9237-5d19c7a5c7da.jpeg</a>&quot; width=&quot;200&quot; /&gt;

</p>
<h2 id="license">License</h2>
<p>React Suite 基于 <a href="https://github.com/rsuite/rsuite/blob/master/LICENSE">MIT licensed</a> 发布。</p>


React Suite 支持最新的，稳定版的全部主流浏览器和平台。 从 React Suite 5 开始不支持 IE10 以下版本(包括 IE10)。不推荐在移动端使用

React Suite 是一套 React 组件库，为后台产品而生。同时也是一个具有贴心设计以及对开发者友好的 UI 框架

<p>&lt;p align=&quot;center&quot;&gt;
  &lt;a href=&quot;<a href="http://zarm.design">http://zarm.design</a>&quot;&gt;
    &lt;img width=&quot;200&quot; src=&quot;<a href="https://zarm.design/images/logo.1a6cfc30.svg">https://zarm.design/images/logo.1a6cfc30.svg</a>&quot;&gt;
  &lt;/a&gt;
&lt;/p&gt;

</p>
<p>&lt;h1 align=&quot;center&quot;&gt;Zarm&lt;/h1&gt;

</p>
<p>&lt;div align=&quot;center&quot;&gt;

</p>
<p><a href="https://github.com/ZhongAnTech/zarm/actions/workflows/test.yml"><img src="https://github.com/ZhongAnTech/zarm/actions/workflows/test.yml/badge.svg" alt="test"></a>
<a href="https://codecov.io/gh/ZhongAnTech/zarm"><img src="https://codecov.io/gh/ZhongAnTech/zarm/branch/master/graph/badge.svg?token=Qqne6VfWnk" alt="codecov"></a>
<a href="https://www.npmjs.org/package/zarm"><img src="https://img.shields.io/npm/v/zarm/latest.svg" alt="npm package"></a>
<img src="https://img.badgesize.io/https://unpkg.com/zarm@latest/dist/zarm.min.js?compression=gzip&label=zarm.min.js" alt="JS gzip size">
<img src="https://img.badgesize.io/https://unpkg.com/zarm@latest/dist/zarm.min.css?compression=gzip&label=zarm.min.css" alt="CSS gzip size">
<a href="https://npmjs.org/package/zarm"><img src="https://img.shields.io/npm/dm/zarm.svg" alt="NPM downloads"></a>
<a href="https://app.netlify.com/sites/zarm/deploys"><img src="https://api.netlify.com/api/v1/badges/7afc45a9-dcac-4475-9903-d3896bc200ed/deploy-status" alt="Netlify Status"></a>
<a href="https://app.fossa.io/projects/git%2Bgithub.com%2FZhongAnTech%2Fzarm?ref=badge_shield"><img src="https://app.fossa.io/api/projects/git%2Bgithub.com%2FZhongAnTech%2Fzarm.svg?type=shield" alt="FOSSA Status"></a>
<a href="https://gitter.im/ZhongAnTech/zarm?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge"><img src="https://badges.gitter.im/Join%20Chat.svg" alt="Gitter"></a></p>
<p>众安科技基于 React 研发的一款适用于企业级的移动端 UI 组件库。</p>
<p>&lt;/div&gt;

</p>
<p>Zarm （读音 /zɑːm/，中文可发音为 扎姆）的命名，灵感来源于众安保险秉承的理念：做有温度的保险。Zarm = za + warm，za 代表 “众安”，warm 有 “温暖” 的含义，以重合的 “a” 字母为中心，各取左右两部分。追求极致的用户体验，致力于做有温度的组件库也是 zarm 项目发起的初衷。</p>
<h2 id="预览">预览</h2>
<p>&lt;img width=&quot;200&quot; src=&quot;<a href="https://user-images.githubusercontent.com/9812721/116021555-ffa29c80-a67a-11eb-8068-614bd912c894.png">https://user-images.githubusercontent.com/9812721/116021555-ffa29c80-a67a-11eb-8068-614bd912c894.png</a>&quot; /&gt;

</p>
<p><a href="https://zarm.design/demo.html#/">https://zarm.design/demo.html#/</a></p>
<h2 id="浏览器支持">浏览器支持</h2>
<ul>
<li>iOS</li>
<li>Android 4.0+</li>
</ul>
<h2 id="安装">安装</h2>
<p>npm 或 yarn 安装</p>
<pre><code class="language-bash"># npm
$ npm install zarm --save
# yarn
$ yarn add zarm
</code></pre>
<h2 id="使用">使用</h2>
<pre><code class="language-js">import { Button, Cell } from &#39;zarm&#39;;
import &#39;zarm/dist/zarm.css&#39;;
</code></pre>
<h2 id="定制主题">定制主题</h2>
<p>可以参考 <a href="https://github.com/ZhongAnTech/zarm/blob/master/packages/site/web/docs/customize-theme.md">定制主题文档</a>。</p>
<h2 id="国际化">国际化</h2>
<p>可以参考 <a href="https://github.com/ZhongAnTech/zarm/blob/master/packages/site/web/docs/i18n.md">国际化文档</a>。</p>
<h2 id="社区">社区</h2>
<table>
<thead>
<tr>
<th align="left">问题上报</th>
<th align="left">讨论交流</th>
<th align="left">微信群</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><a href="https://github.com/ZhongAnTech/zarm/issues">github issues</a></td>
<td align="left"><a href="https://github.com/ZhongAnTech/zarm/discussions">github discussions</a></td>
<td align="left">&lt;img src=&quot;https://cdn-health.zhongan.com/zarm/qrcode.jpg&quot; width=&quot;80&quot; /&gt; &lt;br /&gt;备注 &quot;zarm&quot; 加好友后邀请进群</td>
</tr>
</tbody></table>
<h2 id="如何贡献">如何贡献</h2>
<p>使用过程中发现任何问题都可以提 Issue 给我们，当然，我们也非常欢迎你给我们发 PR。</p>
<p>你可以使用 Gitpod 进行在线开发：</p>
<p><a href="https://gitpod.io/#https://github.com/ZhongAnTech/zarm"><img src="https://gitpod.io/button/open-in-gitpod.svg" alt="Open in Gitpod"></a></p>
<p>或者克隆到本地开发，请阅读我们的 <a href="https://github.com/ZhongAnTech/zarm/blob/master/packages/site/web/docs/contributing.md">贡献指南</a>。</p>
<h2 id="开源协议">开源协议</h2>
<p>MIT</p>
<p><a href="https://app.fossa.io/projects/git%2Bgithub.com%2FZhongAnTech%2Fzarm?ref=badge_large"><img src="https://app.fossa.io/api/projects/git%2Bgithub.com%2FZhongAnTech%2Fzarm.svg?type=large" alt="FOSSA Status"></a></p>


Zarm （读音 /zɑːm/，中文可发音为 扎姆）的命名，灵感来源于众安保险秉承的理念：做有温度的保险。Zarm = za + warm，za 代表 “众安”，warm 有 “温暖” 的含义，以重合的 “a” 字母为中心，各取左右两部分。追求极致的用户体验，致力于做有温度的组件库也是 zarm 项目发起的初衷。

Zarm Design：基于 React 的移动端 UI 组件库，追求极致的用户体验，做有温度的组件库

<h1 id="boty-design">boty-design</h1>
<p>&lt;p align=&quot;center&quot;&gt;
    &lt;img alt=&quot;logo&quot; src=&quot;<a href="https://avatars.githubusercontent.com/u/79920730">https://avatars.githubusercontent.com/u/79920730</a>&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;
&lt;/p&gt;
&lt;p align=&quot;center&quot;&gt;从零打造一套企业级react 组件库生态&lt;/p&gt;

</p>
<p>&lt;p align=&quot;center&quot;&gt;
  &lt;a href=&quot;<a href="https://github.com/boty-design/boty-design">https://github.com/boty-design/boty-design</a>&quot;&gt;
    &lt;img src=&quot;<a href="https://img.shields.io/badge/react-%E7%BB%84%E4%BB%B6%E5%BA%93-blue.svg">https://img.shields.io/badge/react-组件库-blue.svg</a>&quot; alt=&quot;vue&quot;&gt;
  &lt;/a&gt;
  &lt;a href=&quot;<a href="https://github.com/boty-design/boty-design">https://github.com/boty-design/boty-design</a>&quot;&gt;
    &lt;img src=&quot;<a href="https://img.shields.io/badge/license-MIT-green.svg">https://img.shields.io/badge/license-MIT-green.svg</a>&quot; alt=&quot;element-ui&quot;&gt;
  &lt;/a&gt;
  &lt;a href=&quot;<a href="https://github.com/boty-design/boty-design">https://github.com/boty-design/boty-design</a>&quot;&gt;
    &lt;img src=&quot;<a href="https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg">https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg</a>&quot; alt=&quot;lerna&quot;&gt;
  &lt;/a&gt;
&lt;/p&gt;


</p>
<h2 id="文档">文档</h2>
<p><a href="https://boty-design.github.io/boty-design/">中文文档</a></p>
<h2 id="安装">安装</h2>
<pre><code class="language-shell">$ npm install @boty-design/components --save
$ yarn add @boty-design/components
$ pnpm i @boty-design/components
</code></pre>
<h2 id="使用">使用</h2>
<pre><code class="language-javascript">import { Button } from &quot;@boty-design/components&quot;;
const App = () =&gt; (
     &lt;Button onClick={handlerSyncClick} loading={true}  &gt;
        异步按钮
      &lt;/Button&gt;
);
</code></pre>
<h2 id="技术">技术</h2>
<ul>
<li>框架支持【react】 <a href="https://zh-hans.reactjs.org/">https://zh-hans.reactjs.org/</a></li>
<li>组件学习【ant design】 <a href="https://ant.design/index-cn">https://ant.design/index-cn</a></li>
<li>本地开发【vite】 <a href="https://cn.vitejs.dev/">https://cn.vitejs.dev/</a></li>
<li>项目文档【umi文档】 <a href="https://d.umijs.org/zh-CN">https://d.umijs.org/zh-CN</a></li>
<li>持续集成【Travis CI】 <a href="https://travis-ci.org/">https://travis-ci.org</a></li>
<li>持续部署【 github Aciton】 <a href="https://docs.github.com/cn/actions">https://docs.github.com/cn/actions</a></li>
<li>npm管理【lerna】<a href="https://github.com/lerna/lerna">https://github.com/lerna/lerna</a></li>
<li>组件生成【plop】<a href="https://github.com/plopjs/plop">https://github.com/plopjs/plop</a></li>
</ul>
<h2 id="待做清单">待做清单</h2>
<p>✅ 已完成
⭐️ 完善中
❌ 未开始</p>
<h3 id="通用">通用</h3>
<ul>
<li>Button 按钮 ⭐️ </li>
<li>Layout 布局 ❌</li>
<li>Icon 图标 ❌</li>
</ul>
<h3 id="表单">表单</h3>
<ul>
<li>Form 表单组 ⭐️ </li>
<li>Field 表单单位 ⭐️ </li>
<li>Input 输入框 ❌</li>
<li>Radio单选框 ❌</li>
<li>Switch开关 ❌</li>
<li>Checkbox多选框 ❌</li>
<li>Select 选择器 ❌</li>
<li>Slider 滑块 ❌</li>
<li>TimePicker 时间选择器 ❌</li>
<li>DatePicker 日期选择器 ❌</li>
<li>DateTimePicker 日期时间选择器 ❌</li>
<li>Upload 上传 ❌</li>
</ul>
<h3 id="数据">数据</h3>
<ul>
<li>Table 表格 ❌</li>
<li>tree 树 ❌</li>
<li>Tag 标签 ❌</li>
<li>Progress 进度条 ❌</li>
<li>Pagination 分页 ❌</li>
<li>Badge 标记 ❌</li>
</ul>
<h3 id="交互">交互</h3>
<ul>
<li>Dialog 对话框 ❌</li>
<li>MessageBox 弹框 ❌</li>
<li>Drawer 抽屉 ❌</li>
<li>Calendar 日历 ❌</li>
<li>Carousel 轮播走马灯 ❌</li>
</ul>
<h3 id="反馈">反馈</h3>
<ul>
<li>Message 消息提示 ❌</li>
<li>loading 加载 ❌</li>
<li>Notification 通知 ❌</li>
</ul>
<h2 id="license">LICENSE</h2>
<p><a href="https://en.wikipedia.org/wiki/MIT_License">MIT</a></p>


从零打造一套企业级react 组件库生态

boty-design：react 组件库｜组件库学习｜从零造轮子｜pc组件库

<p>&lt;div align=&quot;center&quot;&gt;
  &lt;a href=&quot;<a href="https://concis.org.cn/#/">https://concis.org.cn/#/</a>&quot; target=&quot;_blank&quot;&gt;
    &lt;img alt=&quot;Concis Logo&quot; width=&quot;200&quot; src=&quot;<a href="https://concis.org.cn/images/concis-logo.png&quot;/">https://concis.org.cn/images/concis-logo.png&quot;/</a>&gt;
  &lt;/a&gt;
&lt;/div&gt;
&lt;div align=&quot;center&quot;&gt;
  &lt;h1&gt;Concis&lt;/h1&gt;
&lt;/div&gt;

</p>
<p>&lt;div align=&quot;center&quot;&gt;

</p>
<p>快速构建 React 应用程序的高性能、轻量级 UI 库。</p>
<p>&lt;img src=&quot;<a href="https://img.shields.io/github/stars/fengxinhhh/concis">https://img.shields.io/github/stars/fengxinhhh/concis</a>&quot; alt=&quot;stars&quot;&gt;
&lt;img src=&quot;<a href="https://img.shields.io/badge/react-v18.2.0%2B-%23407fbc">https://img.shields.io/badge/react-v18.2.0%2B-%23407fbc</a>&quot; alt=&quot;react&quot;&gt;
&lt;img src=&quot;<a href="https://img.shields.io/badge/license-MIT-blue.svg">https://img.shields.io/badge/license-MIT-blue.svg</a>&quot; alt=&quot;licence&quot;&gt;
&lt;img src=&quot;<a href="https://github.com/fengxinhhh/concis/workflows/CI/badge.svg">https://github.com/fengxinhhh/concis/workflows/CI/badge.svg</a>&quot; alt=&quot;ci&quot;&gt;

</p>
<p>&lt;/div&gt;

</p>
<p>&lt;div align=&quot;center&quot;&gt;

</p>
<p><a href="./README.md">English</a> | 简体中文</p>
<p>&lt;/div&gt;

</p>
<p>&lt;div align=&quot;center&quot;&gt;
  &lt;img src=&quot;<a href="https://concis.org.cn/images/index-bg.jpg">https://concis.org.cn/images/index-bg.jpg</a>&quot; width=&quot;1200&quot; /&gt;
&lt;/div&gt;

</p>
<h1 id="特征">特征</h1>
<h2 id="全面">全面</h2>
<p>拥有 50 多种开箱即用的高质量组件，可以覆盖绝大部分业务场景。</p>
<h2 id="主题配置">主题配置</h2>
<p>海量色彩，支持全局引入使用：</p>
<ul>
<li><a href="https://concis.org.cn/#/guide/xcolor">色彩系统-内置主题色</a></li>
<li><a href="https://concis.org.cn/#/guide/udark">暗黑模式&amp;主题色双支持</a></li>
</ul>
<h2 id="基于-typescript">基于 TypeScript</h2>
<p>所有组件都是用 TypeScript 编写的，所以天然的类型友好。</p>
<h1 id="安装">安装</h1>
<p><a href="https://www.npmjs.com/package/concis">npm package</a></p>
<pre><code class="language-bash">// with npm
npm install concis@latest
// with yarn
yarn add concis@latest
</code></pre>
<h1 id="例子">例子</h1>
<pre><code class="language-typescript">import React from &#39;react&#39;;
import ReactDOM from &#39;react-dom&#39;;
import { Button } from &#39;concis&#39;;
import &#39;concis/web-react/style/index.css&#39;;
function App() {
  return &lt;Button type=&quot;primary&quot;&gt;Hello Concis!&lt;/Button&gt;;
}
ReactDOM.render(&lt;App /&gt;, document.getElementById(&#39;app&#39;));
</code></pre>
<h1 id="本地体验">本地体验</h1>
<p>在 examples 文件夹中，有一个 <code>vite</code> + <code>react</code> 的工程运行环境，你可以在该环境中体验 <code>concis</code> 组件，在项目根目录运行命令:</p>
<pre><code class="language-tsx">pnpm examples:dev
</code></pre>
<p>访问<code>http://localhost:5173</code>。</p>
<p>&lt;img src=&quot;<a href="https://concis.org.cn/images/examplepic.jpeg">https://concis.org.cn/images/examplepic.jpeg</a>&quot; /&gt;

</p>
<p>&lt;img src=&quot;<a href="https://concis.org.cn/images/example-darkpic.jpeg">https://concis.org.cn/images/example-darkpic.jpeg</a>&quot; /&gt;

</p>
<h1 id="相关链接">相关链接</h1>
<ul>
<li><a href="https://concis.org.cn/#/">官网</a></li>
<li><a href="https://concis.org.cn/#/common/button">组件文档</a></li>
<li><a href="https://concis.org.cn/#/guide/introduce">指南介绍</a></li>
<li><a href="https://concis.org.cn/#/guide/teuse">快速上手</a></li>
</ul>
<h1 id="浏览器支持">浏览器支持</h1>
<table>
<thead>
<tr>
<th><a href="http://godban.github.io/browsers-support-badges/">&lt;img src=&quot;https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/08095282566ac4e0fd98f89aed934b65.png~tplv-uwbnlip3yd-png.png&quot; alt=&quot;IE / Edge&quot; width=&quot;24px&quot; height=&quot;24px&quot; /&gt;</a>&lt;br/&gt;IE / Edge</th>
<th><a href="http://godban.github.io/browsers-support-badges/">&lt;img src=&quot;https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/40ad73571879dd8d9fd3fd524e0e45a4.png~tplv-uwbnlip3yd-png.png&quot; alt=&quot;Firefox&quot; width=&quot;24px&quot; height=&quot;24px&quot; /&gt;</a>&lt;br/&gt;Firefox</th>
<th><a href="http://godban.github.io/browsers-support-badges/">&lt;img src=&quot;https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/4f59d35f6d6837b042c8badd95871b1d.png~tplv-uwbnlip3yd-png.png&quot; alt=&quot;Chrome&quot; width=&quot;24px&quot; height=&quot;24px&quot; /&gt;</a>&lt;br/&gt;Chrome</th>
<th><a href="http://godban.github.io/browsers-support-badges/">&lt;img src=&quot;https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/eee2667f837a9c2ed531805850bf43ec.png~tplv-uwbnlip3yd-png.png&quot; alt=&quot;Safari&quot; width=&quot;24px&quot; height=&quot;24px&quot; /&gt;</a>&lt;br/&gt;Safari</th>
<th><a href="http://godban.github.io/browsers-support-badges/">&lt;img src=&quot;https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3240334d3967dd263c8f4cdd2d93c525.png~tplv-uwbnlip3yd-png.png&quot; alt=&quot;Opera&quot; width=&quot;24px&quot; height=&quot;24px&quot; /&gt;</a>&lt;br/&gt;Opera</th>
<th><a href="http://godban.github.io/browsers-support-badges/">&lt;img src=&quot;https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/f2454685df95a1a557a61861c5bec256.png~tplv-uwbnlip3yd-png.png&quot; alt=&quot;Electron&quot; width=&quot;24px&quot; height=&quot;24px&quot; /&gt;</a>&lt;br/&gt;Electron</th>
</tr>
</thead>
<tbody><tr>
<td>Edge 16</td>
<td>31</td>
<td>49</td>
<td>31</td>
<td>36</td>
<td>last 2 versions</td>
</tr>
</tbody></table>
<h1 id="参与贡献">参与贡献</h1>
<p>贡献之前请先阅读<a href="https://concis.org.cn/#/guide/zcontribute">贡献指南</a>。</p>
<p>感谢所有为 Concis 做过贡献的人!</p>
<p>&lt;a href=&quot;<a href="https://github.com/fengxinhhh/concis/graphs/contributors">https://github.com/fengxinhhh/concis/graphs/contributors</a>&quot;&gt;
  &lt;img src=&quot;<a href="https://contrib.rocks/image?repo=fengxinhhh/concis">https://contrib.rocks/image?repo=fengxinhhh/concis</a>&quot; /&gt;
&lt;/a&gt;</p>


拥有 50 多种开箱即用的高质量组件，可以覆盖绝大部分业务场景

Concis：快速构建React应用程序的高性能、轻量级UI库

<h1 id="otaku-ui">OTAKU-UI</h1>
<p>该项目是基于<code>React Hooks、Typescript、vite</code>来实现的一个<code>UI库</code>，目前依然属于不成熟状态，不适合生产环境。</p>
<h2 id="项目启动">项目启动</h2>
<h3 id="11-全局安装lerna">1.1 全局安装lerna</h3>
<p><code>npm install -g lerna</code></p>
<h3 id="12-安装依赖">1.2 安装依赖</h3>
<p><code>lerna bootstrap</code></p>
<h3 id="13-启动">1.3 启动</h3>
<p><code>cd packages/my-vue-app</code>， 执行<code>npm run dev</code>即可</p>
<h2 id="otaku-cli">otaku-cli</h2>
<p>先后执行 <code>cd packages/otaku-cli</code>、<code>npm link</code> 即可，就可以在命令行使用<code>otaku-cli</code>了</p>
<h3 id="一些命令">一些命令</h3>
<ul>
<li>create xxx  将会在<code>packages/otaku-ui/src/lib</code>目录下创建一个组件</li>
<li>publish 用于更新文档网站</li>
</ul>
<pre><code class="language-bash">Options:
  -V --version            查看当前版本
  -h, --help              查看帮助
Commands:
  create &lt;componentName&gt;  创建组件
  publish                 更新文档网站
</code></pre>
<h2 id="浏览器支持">浏览器支持</h2>
<table>
<thead>
<tr>
<th><a href="http://godban.github.io/browsers-support-badges/">&lt;img src=&quot;https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/08095282566ac4e0fd98f89aed934b65.png~tplv-uwbnlip3yd-png.png&quot; alt=&quot;IE / Edge&quot; width=&quot;24px&quot; height=&quot;24px&quot; /&gt;</a>&lt;br/&gt; Edge Chromium</th>
<th><a href="http://godban.github.io/browsers-support-badges/">&lt;img src=&quot;https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/40ad73571879dd8d9fd3fd524e0e45a4.png~tplv-uwbnlip3yd-png.png&quot; alt=&quot;Firefox&quot; width=&quot;24px&quot; height=&quot;24px&quot; /&gt;</a>&lt;br/&gt;Firefox</th>
<th><a href="http://godban.github.io/browsers-support-badges/">&lt;img src=&quot;https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/4f59d35f6d6837b042c8badd95871b1d.png~tplv-uwbnlip3yd-png.png&quot; alt=&quot;Chrome&quot; width=&quot;24px&quot; height=&quot;24px&quot; /&gt;</a>&lt;br/&gt;Chrome</th>
<th><a href="http://godban.github.io/browsers-support-badges/">&lt;img src=&quot;https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/eee2667f837a9c2ed531805850bf43ec.png~tplv-uwbnlip3yd-png.png&quot; alt=&quot;Safari&quot; width=&quot;24px&quot; height=&quot;24px&quot; /&gt;</a>&lt;br/&gt;Safari</th>
</tr>
</thead>
<tbody><tr>
<td>Edge 86+</td>
<td>last 2 versions</td>
<td>86+</td>
<td>last 2 versions</td>
</tr>
</tbody></table>


先后执行 cd packages/otaku-cli、npm link 即可，就可以在命令行使用otaku-cli了

OTAKU-UI：该项目是基于React Hooks、Typescript、vite来实现的一个UI库，目前依然属于不成熟状态，不适合生产环境

<p>&lt;p&gt;
    &lt;a href=&quot;<a href="https://github.com/youzan/">https://github.com/youzan/</a>&quot;&gt;
        &lt;img alt=&quot;有赞logo&quot; width=&quot;36px&quot; src=&quot;<a href="https://img.yzcdn.cn/public_files/2017/02/09/e84aa8cbbf7852688c86218c1f3bbf17.png">https://img.yzcdn.cn/public_files/2017/02/09/e84aa8cbbf7852688c86218c1f3bbf17.png</a>&quot; alt=&quot;youzan&quot;&gt;
    &lt;/a&gt;
&lt;/p&gt;
&lt;p align=&quot;center&quot;&gt;
    &lt;img alt=&quot;Zent logo&quot; width=&quot;160px&quot; src=&quot;<a href="https://b.yzcdn.cn/public_files/2e7d4cf2f2ee0cf5f4abe894da2d515d.png">https://b.yzcdn.cn/public_files/2e7d4cf2f2ee0cf5f4abe894da2d515d.png</a>&quot; &gt;
&lt;/p&gt;
&lt;p align=&quot;center&quot;&gt;
    Zent &lt;small&gt;&lt;font color=&quot;grey&quot;&gt;( &#92;ˈzent&#92; )&lt;/font&gt;&lt;/small&gt;, a collection of essential UI components written with React.
&lt;/p&gt;

</p>
<p><img src="https://github.com/youzan/zent/workflows/CI/badge.svg" alt="CI">
<a href="https://www.npmjs.com/package/zent"><img src="https://img.shields.io/npm/v/zent.svg?style=flat" alt="npm version"></a>
<a href="https://bundlephobia.com/result?p=zent"><img src="https://badgen.net/bundlephobia/minzip/zent" alt="bundle size"></a>
<a href="https://coveralls.io/github/youzan/zent?branch=master"><img src="https://img.shields.io/coveralls/youzan/zent/master.svg?style=flat" alt="coverage status"></a>
<a href="packages/zent/docs/CONTRIBUTING_zh-CN.md"><img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs welcome"></a></p>
<p>Zent ( \ˈzent\ ) 是有赞 PC 端 WebUI 规范的 React 实现，提供了一整套基础的 UI 组件以及一些常用的业务组件。</p>
<p>目前我们有 50+ 组件，这些组件都已经在有赞的各类 PC 业务中使用，我们会在此基础上，持续开发一些新组件。</p>
<p>我们的目标是让 React 项目开发更快、更简单。</p>
<h3 id="特性">特性</h3>
<ul>
<li>高质量的 React 基础组件以及丰富的业务组件</li>
<li>内置 TypeScript 类型定义文件</li>
<li>支持定制主题</li>
<li>代码/样式按需加载</li>
<li>一套有赞设计师绘制的图标库</li>
</ul>
<h3 id="支持环境">支持环境</h3>
<ul>
<li>React &gt;= 18</li>
<li>现代浏览器，IE 除外</li>
<li>支持服务端渲染(SSR)</li>
</ul>
<h3 id="必须的-polyfill">必须的 polyfill</h3>
<ul>
<li><code>es6.object.assign</code></li>
<li><code>es6.object.is</code></li>
<li><code>es6.string.ends-with</code></li>
<li><code>es6.string.starts-with</code></li>
<li><code>es6.string.includes</code></li>
<li><code>es7.string.trim-left</code></li>
<li><code>es7.string.trim-right</code></li>
<li><code>es6.array.from</code></li>
<li><code>es6.array.of</code></li>
<li><code>es6.array.fill</code></li>
<li><code>es6.array.find</code></li>
<li><code>es6.array.find-index</code></li>
<li><code>es7.array.includes</code></li>
</ul>
<h2 id="安装">安装</h2>
<pre><code class="language-shell">yarn add zent
# or
npm install zent --save
</code></pre>
<h2 id="组件文档">组件文档</h2>
<p><a href="https://youzan.github.io/zent/zh/guides/install">https://youzan.github.io/zent/zh/guides/install</a></p>
<h2 id="贡献代码">贡献代码</h2>
<p>修改代码请阅读我们的<a href="packages/zent/docs/CONTRIBUTING_zh-CN.md">开发指南</a>。</p>
<p>使用过程中发现任何问题都可以提 <a href="https://github.com/youzan/zent/issues">Issue</a> 给我们，当然，我们也非常欢迎你给我们发 <a href="https://github.com/youzan/zent/pulls">PR</a>。</p>
<h2 id="开源协议">开源协议</h2>
<p>本项目基于 <a href="https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89">MIT</a> 协议，请自由地享受和参与开源。</p>


高质量的 React 基础组件以及丰富的业务组件，内置 TypeScript 类型定义文件，支持定制主题，代码/样式按需加载，一套有赞设计师绘制的图标库

Zent是有赞 PC 端 WebUI 规范的 React 实现，提供了一整套基础的 UI 组件以及一些常用的业务组件

<p>&lt;p align=&quot;center&quot;&gt;
  &lt;a href=&quot;<a href="https://ant.design">https://ant.design</a>&quot;&gt;
    &lt;img width=&quot;200&quot; src=&quot;<a href="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg">https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg</a>&quot;&gt;
  &lt;/a&gt;
&lt;/p&gt;

</p>
<p>&lt;h1 align=&quot;center&quot;&gt;Ant Design&lt;/h1&gt;

</p>
<p>&lt;div align=&quot;center&quot;&gt;

</p>
<p>一套企业级 UI 设计语言和 React 组件库。</p>
<p><a href="https://github.com/ant-design/ant-design/actions?query=workflow%3A%22%E2%9C%85+test%22"><img src="https://github.com/ant-design/ant-design/workflows/%E2%9C%85%20test/badge.svg" alt="CI status"></a> <a href="https://codecov.io/gh/ant-design/ant-design/branch/master"><img src="https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square" alt="codecov"></a> <a href="http://npmjs.org/package/antd"><img src="http://img.shields.io/npm/v/antd.svg?style=flat-square" alt="NPM version"></a> <a href="https://npmjs.org/package/antd"><img src="https://img.shields.io/npm/dm/antd.svg?style=flat-square" alt="NPM downloads"></a></p>
<p><a href="https://david-dm.org/ant-design/ant-design"><img src="https://img.shields.io/david/ant-design/ant-design?style=flat-square" alt="david deps"></a> <a href="https://david-dm.org/ant-design/ant-design?type=dev"><img src="https://img.shields.io/david/dev/ant-design/ant-design?style=flat-square" alt="david devDeps"></a> <a href="https://lgtm.com/projects/g/ant-design/ant-design/alerts/"><img src="https://flat.badgen.net/lgtm/alerts/g/ant-design/ant-design" alt="Total alerts"></a> <a href="https://unpkg.com/browse/antd/dist/antd.min.js"><img src="https://img.badgesize.io/https:/unpkg.com/antd/dist/antd.min.js?label=antd.min.js&compression=gzip&style=flat-square" alt=""></a> <a href="https://unpkg.com/browse/antd/dist/antd.min.css"><img src="https://img.badgesize.io/https:/unpkg.com/antd/dist/antd.min.css?label=antd.min.css&compression=gzip&style=flat-square" alt=""></a></p>
<p><a href="https://twitter.com/AntDesignUI"><img src="https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design&style=social" alt="Follow Twitter"></a> <a href="https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield"><img src="https://app.fossa.io/api/projects/git%2Bgithub.com%2Fant-design%2Fant-design.svg?type=shield" alt="FOSSA Status"></a> <a href="https://github.com/ant-design/ant-design/discussions"><img src="https://img.shields.io/badge/discussions-on%20github-blue?style=flat-square" alt="Discussions"></a> <a href="https://github.com/actions-cool/issues-helper"><img src="https://img.shields.io/badge/Issues%20Manage%20By-issues--helper-orange?style=flat-square" alt=""></a> <a href="https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22"><img src="https://flat.badgen.net/github/label-issues/ant-design/ant-design/help%20wanted/open" alt="Issues need help"></a></p>
<p>&lt;/div&gt;

</p>
<p><a href="https://ant.design/index-cn"><img src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Ey3wTo-5__QAAAAAAAAAAABkARQnAQ" alt=""></a></p>
<p><a href="./README.md">English</a> | <a href="./README-pt_BR.md">Português</a> | 简体中文 | <a href="./README-uk_UA.md">Українською</a></p>
<h2 id="✨-特性">✨ 特性</h2>
<ul>
<li>🌈 提炼自企业级中后台产品的交互语言和视觉风格。</li>
<li>📦 开箱即用的高质量 React 组件。</li>
<li>🛡 使用 TypeScript 开发，提供完整的类型定义文件。</li>
<li>⚙️ 全链路开发和设计工具体系。</li>
<li>🌍 数十个国际化语言支持。</li>
<li>🎨 深入每个细节的主题定制能力。</li>
</ul>
<h2 id="🖥-兼容环境">🖥 兼容环境</h2>
<ul>
<li>现代浏览器和 IE11（需要 <a href="https://ant.design/docs/react/getting-started-cn#%E5%85%BC%E5%AE%B9%E6%80%A7">polyfills</a>）。</li>
<li>支持服务端渲染。</li>
<li><a href="https://www.electronjs.org/">Electron</a></li>
</ul>
<table>
<thead>
<tr>
<th><a href="http://godban.github.io/browsers-support-badges/">&lt;img src=&quot;https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png&quot; alt=&quot;IE / Edge&quot; width=&quot;24px&quot; height=&quot;24px&quot; /&gt;</a>&lt;br&gt;IE / Edge</th>
<th><a href="http://godban.github.io/browsers-support-badges/">&lt;img src=&quot;https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png&quot; alt=&quot;Firefox&quot; width=&quot;24px&quot; height=&quot;24px&quot; /&gt;</a>&lt;br&gt;Firefox</th>
<th><a href="http://godban.github.io/browsers-support-badges/">&lt;img src=&quot;https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png&quot; alt=&quot;Chrome&quot; width=&quot;24px&quot; height=&quot;24px&quot; /&gt;</a>&lt;br&gt;Chrome</th>
<th><a href="http://godban.github.io/browsers-support-badges/">&lt;img src=&quot;https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png&quot; alt=&quot;Safari&quot; width=&quot;24px&quot; height=&quot;24px&quot; /&gt;</a>&lt;br&gt;Safari</th>
<th><a href="http://godban.github.io/browsers-support-badges/">&lt;img src=&quot;https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png&quot; alt=&quot;Electron&quot; width=&quot;24px&quot; height=&quot;24px&quot; /&gt;</a>&lt;br&gt;Electron</th>
</tr>
</thead>
<tbody><tr>
<td>IE11, Edge</td>
<td>last 2 versions</td>
<td>last 2 versions</td>
<td>last 2 versions</td>
<td>last 2 versions</td>
</tr>
</tbody></table>
<h2 id="📦-安装">📦 安装</h2>
<pre><code class="language-bash">npm install antd --save
</code></pre>
<pre><code class="language-bash">yarn add antd
</code></pre>
<h2 id="🔨-示例">🔨 示例</h2>
<pre><code class="language-jsx">import { Button, DatePicker } from &#39;antd&#39;;

const App = () =&gt; (
  &lt;&gt;
    &lt;Button type=&quot;primary&quot;&gt;PRESS ME&lt;/Button&gt;
    &lt;DatePicker /&gt;
  &lt;/&gt;
);
</code></pre>
<p>引入样式：</p>
<pre><code class="language-jsx">import &#39;antd/dist/antd.css&#39;; // or &#39;antd/dist/antd.less&#39;
</code></pre>
<h3 id="🌈-定制主题">🌈 定制主题</h3>
<p>参考 <a href="https://ant.design/docs/react/customize-theme-cn">定制主题</a> 文档。</p>
<h3 id="🛡-typescript">🛡 TypeScript</h3>
<p>参考 <a href="https://ant.design/docs/react/use-in-typescript-cn">在 TypeScript 中使用</a>。</p>
<h2 id="🌍-国际化">🌍 国际化</h2>
<p>参考 <a href="https://ant.design/docs/react/i18n-cn">国际化文档</a>。</p>
<h2 id="🔗-链接">🔗 链接</h2>
<ul>
<li><a href="https://ant.design/">首页</a></li>
<li><a href="https://ant.design/components/overview-cn">所有组件</a></li>
<li><a href="http://pro.ant.design/">Ant Design Pro</a></li>
<li><a href="CHANGELOG.en-US.md">更新日志</a></li>
<li><a href="http://react-component.github.io/">React 底层基础组件</a></li>
<li><a href="http://mobile.ant.design">移动端组件</a></li>
<li><a href="https://procomponents.ant.design">页面级组件</a></li>
<li><a href="https://charts.ant.design">Ant Design 图表</a></li>
<li><a href="https://github.com/ant-design/ant-design-icons">Ant Design 图标</a></li>
<li><a href="https://github.com/ant-design/ant-design-colors">Ant Design 色彩</a></li>
<li><a href="https://landing.ant.design">首页模板集</a></li>
<li><a href="https://motion.ant.design">动效</a></li>
<li><a href="http://scaffold.ant.design">脚手架市场</a></li>
<li><a href="https://github.com/ant-design/ant-design/wiki/Ant-Design-%E8%AE%BE%E8%AE%A1%E5%9F%BA%E7%A1%80%E7%AE%80%E7%89%88">设计规范速查手册</a></li>
<li><a href="https://github.com/ant-design/ant-design/wiki/Development">开发者说明</a></li>
<li><a href="https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B">版本发布规则</a></li>
<li><a href="https://ant.design/docs/react/faq-cn">常见问题</a></li>
<li><a href="https://u.ant.design/codesandbox-repro">CodeSandbox 模板</a> for bug reports</li>
<li><a href="https://ant.design/docs/react/customize-theme-cn">定制主题</a></li>
<li><a href="https://ant.design/docs/react/i18n-cn">国际化</a></li>
<li><a href="https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator">成为社区协作成员</a></li>
</ul>
<h2 id="⌨️-本地开发">⌨️ 本地开发</h2>
<p>你可以使用 Gitpod 进行在线开发：</p>
<p><a href="https://gitpod.io/#https://github.com/ant-design/ant-design"><img src="https://gitpod.io/button/open-in-gitpod.svg" alt="Open in Gitpod"></a></p>
<p>或者克隆到本地开发:</p>
<pre><code class="language-bash">$ git clone git@github.com:ant-design/ant-design.git
$ cd ant-design
$ npm install
$ npm start
</code></pre>
<p>打开浏览器访问 <a href="http://127.0.0.1:8001">http://127.0.0.1:8001</a> ，更多<a href="https://github.com/ant-design/ant-design/wiki/Development">本地开发文档</a>。</p>
<h2 id="🤝-参与共建-prs-welcome">🤝 参与共建 <a href="http://makeapullrequest.com"><img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square" alt="PRs Welcome"></a></h2>
<p>请参考<a href="https://ant.design/docs/react/contributing-cn">贡献指南</a>.</p>
<blockquote>
<p>强烈推荐阅读 <a href="https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way">《提问的智慧》</a>、<a href="https://github.com/seajs/seajs/issues/545">《如何向开源社区提问题》</a> 和 <a href="http://www.chiark.greenend.org.uk/%7Esgtatham/bugs-cn.html">《如何有效地报告 Bug》</a>、<a href="https://zhuanlan.zhihu.com/p/25795393">《如何向开源项目提交无法解答的问题》</a>，更好的问题更容易获得帮助。</p>
</blockquote>
<p><a href="https://issuehunt.io/repos/34526884"><img src="https://issuehunt.io/static/embed/issuehunt-button-v1.svg" alt="Let&#39;s fund issues in this repository"></a></p>
<h2 id="👥-社区互助">👥 社区互助</h2>
<p>如果您在使用的过程中碰到问题，可以通过下面几个途径寻求帮助，同时我们也鼓励资深用户通过下面的途径给新人提供帮助。</p>
<p>通过 GitHub Discussions 提问时，建议使用 <code>Q&amp;A</code> 标签。</p>
<p>通过 Stack Overflow 或者 Segment Fault 提问时，建议加上 <code>antd</code> 标签。</p>
<ol>
<li><a href="https://github.com/ant-design/ant-design/discussions">GitHub Discussions</a></li>
<li><a href="http://stackoverflow.com/questions/tagged/antd">Stack Overflow</a>（英文）</li>
<li><a href="https://segmentfault.com/t/antd">Segment Fault</a>（中文）</li>
</ol>
<h2 id="❤️-赞助者">❤️ 赞助者 <img src="https://opencollective.com/ant-design/tiers/backers/badge.svg?label=Backers&color=brightgreen" alt=""> <img src="https://opencollective.com/ant-design/tiers/sponsors/badge.svg?label=Sponsors&color=brightgreen" alt=""></h2>
<p><a href="https://opencollective.com/ant-design#support"><img src="https://opencollective.com/ant-design/tiers/backers.svg?avatarHeight=36" alt=""></a></p>
<p><a href="https://opencollective.com/ant-design#support"><img src="https://opencollective.com/ant-design/tiers/sponsors.svg?avatarHeight=36" alt=""></a></p>


提炼自企业级中后台产品的交互语言和视觉风格，开箱即用的高质量 React 组件，使用 TypeScript 开发，提供完整的类型定义文件