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

Programming language: TypeScript

License: MIT License

Tags: UI Frameworks     Responsive    

README

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

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

🎉 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

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

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

• Semi DSM
• Semi Design2Code
• Semi Figma Plugin
• Quick Start
• Components Overview
• Customizing Themes
• Design Tokens
• Dark Mode
• Semi Icons
• Global Config
• Internationalization
• FAQ
• CHANGELOG

👌 Platform Support

Semi UI supports all major modern browsers.

chrome	firefox	safari	IE/Edge	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.

💖 Thanks

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

Thanks to Cypress for providing E2E testing.

🎈 License

Semi UI is [MIT Licensed](LICENSE)