Skip to content

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

License

Notifications You must be signed in to change notification settings

YyumeiZhang/semi-design

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Semi-UI

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

NPM FIGMA LICENSE BUILD-JS BUILD-CSS CODECOV Chromatic Cypress

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

👌 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

👐 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

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.

🎈 License

Semi UI is MIT Licensed

About

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

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 54.2%
  • JavaScript 33.5%
  • SCSS 12.2%
  • Other 0.1%