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] [![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 [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 58 high-quality Components. - ๐Ÿ’… 2000+ Design Tokens. Flexible custom render structure. Build your own design system. - ๐ŸŒ 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|[electron](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 Chromatic Thanks to [Chromatic](https://www.chromatic.com/) for providing the visual testing platform that helps us review UI changes and catch visual regressions. Cypress Thanks to [Cypress](https://www.cypress.io/) for providing E2E testing. # ๐ŸŽˆ License Semi UI is [MIT Licensed](LICENSE)