Semi-UI

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

[![NPM][npm-badge]][npm-url] [![FIGMA][figma-badge]][figma-url] [![LICENSE][license-badge]][license-url] [![CODECOV][codecov-badge]][codecov-url] [npm-badge]: https://img.shields.io/npm/v/@douyinfe/semi-ui.svg [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

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

# 🎉 Features - 💪 Up to 58 high-quality Components. - 💅 Thousands Design Tokens. Powerful Themes Customizing. - 🌍 Internationalization Support for Dozens of Languages. - 👏 Written in Typescript, Friendly Static Type Support. - 🥳 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 * [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#). # 🎈 License Semi UI is [MIT Licensed](LICENSE)