Semi-UI

A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps.

[![NPM][npm-badge]][npm-url] [![CONTRIBUTORS][contributors-badge]][contributors-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] [npm-badge]: https://img.shields.io/npm/v/@douyinfe/semi-ui.svg [contributors-badge]: https://img.shields.io/github/contributors/DouyinFE/semi-design [contributors-url]: https://github.com/DouyinFE/semi-design/graphs/contributors [npm-url]: https://www.npmjs.com/package/@douyinfe/semi-ui [figma-badge]: https://img.shields.io/badge/Figma-UIKit-%2318a0fb [figma-url]: https://www.figma.com/@semi [license-badge]: https://img.shields.io/npm/l/@douyinfe/semi-ui [license-url]: https://github.com/DouyinFE/semi-design/blob/main/LICENSE [codecov-badge]: https://img.shields.io/codecov/c/gh/DouyinFE/semi-design [codecov-url]: https://app.codecov.io/gh/DouyinFE/semi-design [chromatic-badge]: https://img.shields.io/badge/test-chromatic-brightgreen [chromatic-url]: https://www.chromatic.com/ [cypress-badge]: https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/simple/k83u7j&style=flat&logo=cypress [cypress-url]: https://dashboard.cypress.io/projects/k83u7j/runs [build-js-badge]: https://img.badgesize.io/https:/unpkg.com/@douyinfe/semi-ui/dist/umd/semi-ui.min.js?label=semi.min.js&compression=gzip [build-js-url]: https://unpkg.com/browse/@douyinfe/semi-ui/dist/umd/semi-ui.min.js [build-css-badge]: https://img.badgesize.io/https:/unpkg.com/@douyinfe/semi-ui/dist/css/semi.min.css?label=semi.min.css&compression=gzip [build-css-url]: https://unpkg.com/browse/@douyinfe/semi-ui/dist/css/semi.min.css

English | [简体中文](./README-zh_CN.md)

# 🎉 Features - 💪 Up to 60+ high-quality Components. - 💕 Complete A11y support, follows W3C standards to provide keyboard interaction, focus management and ARIA for all components - 💅 Design system management Semi DSM, up to 2000+ Design Tokens, build your own design system quickly. - 🌍 Internationalization Support for Dozens of Languages, timezone, RTL support - 💅 Code2Design, automatically generate Figma UI Kit according to different themes, keep same between design and code - 🚀 Powerful Design2Code support, convert figma draft to code in a few seconds - ⚙️ Strict quality assurance, covering unit testing, E2E testing, visual testing - 👏 Written in Typescript, friendly Static Type Support. Based on Foundation/Adapter architecture, easy to read and contribute - 🥳 SSR (Server Side Rendering) Compatible. # 🔥 Install ```sh # with npm npm install @douyinfe/semi-ui # with yarn yarn add @douyinfe/semi-ui ``` # 👍 Usage Here is a quick example to get you started, it's all you need: ```jsx import React from 'react'; import ReactDOM from 'react-dom'; import { Button, Switch } from '@douyinfe/semi-ui'; const App = () => ( <> ); ReactDOM.render(, document.querySelector('#app')); ``` And [Semi UI Doc Site](https://semi.design/en-US/) has hundreds of editable examples and live preview, welcome to play with those examples. # 📌 Documentation * [Semi DSM](https://semi.design/dsm) * [Semi Design2Code](https://semi.design/code/en-US) * [Semi Figma Plugin](https://www.figma.com/community/plugin/1166339852662786534/Semi-Design-%E8%AE%BE%E8%AE%A1%E8%BD%AC%E4%BB%A3%E7%A0%81) * [Quick Start](https://semi.design/zh-CN/start/getting-started) * [Components Overview](https://semi.design/zh-CN/start/overview) * [Customizing Themes](https://semi.design/zh-CN/start/customize-theme) * [Design Tokens](https://semi.design/zh-CN/basic/tokens) * [Dark Mode](https://semi.design/zh-CN/start/dark-mode) * [Semi Icons](https://semi.design/zh-CN/basic/icon) * [Global Config](https://semi.design/zh-CN/other/configprovider) * [Internationalization](https://semi.design/zh-CN/other/locale) * [FAQ](https://semi.design/zh-CN/start/faq) * [CHANGELOG](https://semi.design/zh-CN/start/changelog) # 👌 Platform Support Semi UI supports all major modern browsers. |[ chrome

](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/70.4.0/chrome/chrome.png)
chrome|[ firefox

](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/70.4.0/firefox/firefox.png)
firefox|[ safari

](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/70.4.0/safari/safari.png)
safari|[ IE/Edge

](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/70.4.0/edge/edge.png)
IE/Edge|[

](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/70.4.0/electron/electron.png)
Electron| |--|--|--|--|--| | latest 2 versions | latest 2 versions | latest 2 versions | Edge | latest 2 versions | # 👐 Contributing Read the contributing guide to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to Semi UI. See [CONTRIBUTING](CONTRIBUTING-en-US.md) documentation. # 👨‍👨‍👧‍👦 User Group Join [User Group](https://bytedance.feishu.cn/docs/doccnw93Dujm3UCkHRDTMTm1qwe#). # 💖 Thanks

Thanks to [Chromatic](https://www.chromatic.com/) for providing the visual testing platform that helps us review UI changes and catch visual regressions.

Thanks to [Cypress](https://www.cypress.io/) for providing E2E testing. # 🎈 License Semi UI is [MIT Licensed](LICENSE)