Semi Design

A modern, comprehensive, flexible design system and React UI library. Prov...

DouyinFE/semi-design semi.design/en-US/@douyinfe/semi-ui

README

Semi-UI

A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. 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 | 简体中文

🎉 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:

``` js
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'));
```

And Semi UI Doc Site has hundreds of editable examples and live preview, welcome to play with those examples.

📌 Documentation

👌 Platform Support

Semi UI supports all major modern browsers.

\|[	\|[	\|[	\|[	\|[
\|--\|--\|--\|--\|--\|
latest	latest	latest	Edge	latest

👐 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 documentation.