Semi Design

A modern, comprehensive, flexible design system and React UI library. Provide more than 3000+ Design Tokens, easy to build your design system. Make Semi Design to Any Design. Design to Code in one click
GitHub
8.56k
Created 3 years ago, last commit 2 days ago
128 contributors
3.92k commits
Stars added on GitHub, month by month
12
1
2
3
4
5
6
7
8
9
10
11
2023
2024
Stars added on GitHub, per day, on average
Yesterday
+3
Last week
+4.9
/day
Last month
+3.8
/day
Last 12 months
+3.0
/day
npmPackage on NPM
Monthly downloads on NPM
12
1
2
3
4
5
6
7
8
9
10
11
2023
2024
README

Semi-UI

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

Twitter Follow

LICENSE NPM CONTRIBUTORS Design Token FIGMA CODECOV Chromatic Cypress

English | 简体中文

🎉 Features

  • 💪 Up to 60+ high-quality Components. Stable update since 2019
  • 🚀 Official Design to Code (D2C) support, convert figma draft to real code in a few seconds
  • 💅 Code to Design (C2D), automatically generate Figma UI Kit according to different themes, keep same between design and code
  • 💕 Complete A11y support, follows W3C standards to provide keyboard interaction, focus management and ARIA for all components
  • 💅 Design system management Semi DSM, up to 3000+ Design Tokens, 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.
  • 📦 Easily compatible with web components, providing a complete adaptation solution, more suitable for building SDKs, browser plugins and other scenarios that require DOM isolation.

🔥 Install

npm install @douyinfe/semi-ui

👍 Component Usage

Here is a quick example to get you started, it's all you need:

import React from 'react';
import { createRoot } from 'react-dom/client';
import { Button, Form } from '@douyinfe/semi-ui';

const App = () => (
    <Form>
        <Form.Input field='name' initValue='semi design'></Form.Input>
        <Button htmlType='submit'>submit</Button>
    </Form>
);

const root = createRoot(document.querySelector('#app'));

root.render(<App />);

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

⚡️ Design to Code Usage

Install Semi Figma Plugin. Translate Figma to real code in seconds. Support multiple output formats: JSX + SCSS / Emotion/Tailwind, or JSON Schema DSL

  • Support figma devmode, selecting a layer, directly get corresponding code on the right

design2code

  • Or jump to codesandbox to continue editing

codesandboxdemo

🎨 DSM Usage

Define your own design system base on Semi UI with DSM in one click, Provide more than 3000 tokens for you to configure every detail. Sync between Figma and Code at all times.

dsmintro

📰 News about Semi UI

📌 Documentation

📝 Blogs

👌 Platform Support

Semi UI supports all major modern browsers.

chrome
chrome
firefox
firefox
safari
safari
IE/Edge
IE/Edge
electron
Electron
latest 2 versions latest 2 versions latest 2 versions Edge latest 2 versions

👨‍👨‍👧‍👦 User Group

Join User Group on Feishu / Lark

💖 Thanks

Chromatic

Thanks to Chromatic for providing the visual testing platform that helps us review UI changes and catch visual regressions.

Cypress

Thanks to Cypress for providing E2E testing.

👐 Contributing

Thanks to all the people who already contributed!

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.

🎈 License

Semi UI is MIT Licensed