快速搭建美观的 React 应用。由抖音前端与 UED 团队维护。 https://semi.design/

pointhalo 9372decf97 feat: form use props.id apply to x-form-id first %!s(int64=2) %!d(string=hai) anos
.codesandbox bf853a8bda feat(icon): add double_chevron_left,double_chevron_right icons #260 (#341) %!s(int64=3) %!d(string=hai) anos
.github 3f0510c130 Test cypress (#1231) %!s(int64=3) %!d(string=hai) anos
.storybook 6f44d7e0d2 chore: remove useless storybook v5 config %!s(int64=3) %!d(string=hai) anos
.vscode 6ee6f82634 feat: token table add animation %!s(int64=3) %!d(string=hai) anos
content 2f5abc9fd0 style: fix form token extra spell incorrect (#1272) %!s(int64=2) %!d(string=hai) anos
cypress fa962bc7eb feat: new tooltip smart pos adjust (#1176) %!s(int64=2) %!d(string=hai) anos
packages 9372decf97 feat: form use props.id apply to x-form-id first %!s(int64=2) %!d(string=hai) anos
plugins f76bd5879d feat: init %!s(int64=4) %!d(string=hai) anos
scripts 9a74b5c9d1 fix:fix design token merge logic %!s(int64=3) %!d(string=hai) anos
search 708df1978f chore: update search data %!s(int64=3) %!d(string=hai) anos
src 4b6519d753 chore: update homepage semi c2d section %!s(int64=2) %!d(string=hai) anos
static ed6798dead docs: update v2.7.0 changelog %!s(int64=3) %!d(string=hai) anos
test 5244bea095 chore: add jest resizeobserver polyfill %!s(int64=3) %!d(string=hai) anos
.commitlintrc.js f76bd5879d feat: init %!s(int64=4) %!d(string=hai) anos
.eslintignore f76bd5879d feat: init %!s(int64=4) %!d(string=hai) anos
.eslintrc.js 08776929ba Merge branch 'release' into js2css %!s(int64=3) %!d(string=hai) anos
.gitattributes 8337c6d90a Update .gitattributes %!s(int64=3) %!d(string=hai) anos
.gitignore f8d62f4c66 test: [Image] add test cases for Image (#1236) %!s(int64=2) %!d(string=hai) anos
.lighthouserc.js fb91638513 chore(ci): lighthouse (#380) %!s(int64=3) %!d(string=hai) anos
.npmrc 37f53d3a5e chore: update yarn.lock %!s(int64=3) %!d(string=hai) anos
.prettierrc.js f76bd5879d feat: init %!s(int64=4) %!d(string=hai) anos
.stylelintrc.js f76bd5879d feat: init %!s(int64=4) %!d(string=hai) anos
CODE_OF_CONDUCT.md 0e46959d60 Create CODE_OF_CONDUCT.md %!s(int64=4) %!d(string=hai) anos
CONTRIBUTING-en-US.md 110db20637 docs: update CONTRIBUTING.md %!s(int64=3) %!d(string=hai) anos
CONTRIBUTING.md d7e8271733 docs: update CONTRIBUTING.md %!s(int64=3) %!d(string=hai) anos
LICENSE 15deb4dd41 Update LICENSE %!s(int64=4) %!d(string=hai) anos
README-zh_CN.md 5a03209c5e docs: update readme %!s(int64=2) %!d(string=hai) anos
README.md aa732143a4 docs: update readme url link of design2code %!s(int64=2) %!d(string=hai) anos
babel.config.js f76bd5879d feat: init %!s(int64=4) %!d(string=hai) anos
cypress.json 19d7accbee feat(tooltip): leftTopOver supports autoAdjustOverflow #294 (#551) %!s(int64=3) %!d(string=hai) anos
favicon.ico f76bd5879d feat: init %!s(int64=4) %!d(string=hai) anos
gatsby-browser.js f76bd5879d feat: init %!s(int64=4) %!d(string=hai) anos
gatsby-config.js 66559b4561 chore: add cdn config %!s(int64=2) %!d(string=hai) anos
gatsby-node.js 29ecfc791f fix: add hash to all static files of docsite %!s(int64=2) %!d(string=hai) anos
gatsby-ssr.js f76bd5879d feat: init %!s(int64=4) %!d(string=hai) anos
jest.config.js 591051eb86 test: add istanbul ignore to some file and update jest exclude config %!s(int64=3) %!d(string=hai) anos
lerna.json 39123342dc v2.23.4 %!s(int64=2) %!d(string=hai) anos
nyc.config.js 591051eb86 test: add istanbul ignore to some file and update jest exclude config %!s(int64=3) %!d(string=hai) anos
package.json e24161e235 chore: update header version to v0.0.18 %!s(int64=2) %!d(string=hai) anos
tsconfig.eslint.json f76bd5879d feat: init %!s(int64=4) %!d(string=hai) anos
tsconfig.json ef2531c8be Fix strict ts (#314) %!s(int64=3) %!d(string=hai) anos
yarn.lock ac2e103798 chore: update lock %!s(int64=2) %!d(string=hai) anos

README-zh_CN.md

Semi-UI

现代、全面、灵活的设计系统和 UI 库。 致力打通 DesignOps & DevOps ,快速搭建美观的 React 应用。

[![NPM][npm-badge]][npm-url] [![FIGMA][figma-badge]][figma-url] [![LICENSE][license-badge]][license-url] [![BUILD-JS][build-js-badge]][build-js-url] [![BUILD-CSS][build-css-badge]][build-css-url] [![CODECOV][codecov-badge]][codecov-url] [![Chromatic][chromatic-badge]][chromatic-url] [![Cypress][cypress-badge]][cypress-url]

简体中文 | English

🎉 特性

  • 💪 60+高质量组件
  • 💕 完善的无障碍支持,为所有组件提供遵循 W3C 标准的键盘交互、焦点管理和语义化
  • 🎨 设计系统管理工具 Semi DSM,多达2000+ Design Token,快速定制你的专属设计系统
  • 🌍 国际化支持 17 种语言,提供完备的多语言、多时区、RTL支持
  • 💅 Code2Design,根据不同主题自动生成 Figma UI Kit,保持代码与设计同源
  • 🚀 强大的 Design2Code支持,设计稿一键转代码,快速构建应用
  • ⚙️ 稳定的质量保障,覆盖单元测试、E2E测试、视觉回归测试等多种测试手段
  • 🥳 支持 SSR
  • 👏 使用 TypeScript, 良好的类型定义,基于 Foundation / Adapter 架构,源码易于阅读 / 贡献

🔥 安装

# 使用 npm
npm install @douyinfe/semi-ui

# 使用 yarn
yarn add @douyinfe/semi-ui

👍 使用

这是一个快速开始的例子:

import React from 'react';
import ReactDOM from 'react-dom';
import { Button, Switch } from '@douyinfe/semi-ui';

const App = () => (
    <>
        <Button type='primary'>primary button</Button>
        <Switch size='large' />
    </>
);

ReactDOM.render(<App />, document.querySelector('#app'));

Semi UI 官网 拥有上千个支持实时调试的例子,欢迎体验使用。

📌 文档

👌 平台支持

Semi UI 支持所有主流浏览器。

|chrome
chrome|firefox
firefox|safari
safari|IE/Edge
IE/Edge|electron
Electron| |--|--|--|--|--| | latest 2 versions | latest 2 versions | latest 2 versions | Edge | latest 2 versions |

👐 贡献指南

阅读贡献指南了解我们的开发流程,包括开发规范、测试规范和构建规范等。

CONTRIBUTING

👨‍👨‍👧‍👦 交流群

有任何问题可以进群交流,我们会及时给予解答和反馈。

加入用户群.

💖 Thanks

Chromatic

感谢 Chromatic 提供可视化测试平台,帮助我们审查 UI 更改和提供视觉回归测试。

Cypress

感谢 Cypress 提供 E2E 测试。

🎈 协议

Semi UI 使用 MIT 协议