Semi-UI
A modern, comprehensive, flexible design system and UI library. Quickly build beautiful React apps.
English | 简体中文
🎉 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
# 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
- 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 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