Semi-UI
A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.
[![LICENSE][license-badge]][license-url] [![NPM][npm-badge]][npm-url] [![CONTRIBUTORS][contributors-badge]][contributors-url] ![Design Token][Design Token] [![FIGMA][figma-badge]][figma-url]
[![CODECOV][codecov-badge]][codecov-url] [![Chromatic][chromatic-badge]][chromatic-url] [![Cypress][cypress-badge]][cypress-url]
[](https://twitter.com/SemiDesignUI)
[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
[Design Token]: https://img.shields.io/badge/Design%20Token-2739%2B-brightgreen
[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
# ๐ Features
- ๐ช Up to 70+ high-quality Components.
- ๐
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
- ๐ Complete A11y support, follows W3C standards to provide keyboard interaction, focus management and ARIA for all components
- ๐
Up to 3000+ Design Tokens can be easily modify by Semi Design system management, make Semi Design to Any Design quickly.
- ๐ Internationalization Support for Dozens of Languages, timezone, RTL support
- โ๏ธ 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 = () => (
<>
](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/70.4.0/chrome/chrome.png)
](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/70.4.0/firefox/firefox.png)
](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/70.4.0/safari/safari.png)
](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/70.4.0/edge/edge.png)
](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/70.4.0/electron/electron.png)
Thanks to [Cypress](https://www.cypress.io/) for providing E2E testing.
## ๐ Contributing
Thanks to all the people who already contributed!