semi-design

Semi-UI

现代、全面、灵活的设计系统和 UI 库。 快速搭建美观的 React 应用。

[![NPM][npm-badge]][npm-url] [![FIGMA][figma-badge]][figma-url] [![LICENSE][license-badge]][license-url] [![CODECOV][codecov-badge]][codecov-url] [![Chromatic][chromatic-badge]][chromatic-url]

简体中文 | English

🎉 特性

• 💪 58+高质量组件
• 💅 强大的主题定制，上千个 Design Token
• 🌍 国际化支持 14 种语言
• 👏 使用 TypeScript，良好的类型定义
• 🥳 支持 SSR

🔥 安装

# 使用 npm
npm install @douyinfe/semi-ui

# 使用 yarn
yarn add @douyinfe/semi-ui

👍 使用

这是一个快速开始的例子：

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

Semi UI 官网 拥有上千个支持实时调试的例子，欢迎体验使用。

📌 文档

• 快速开始
• 组件总览
• 自定义主题
• Design Tokens
• 暗色模式
• Icons
• 全局配置
• 国际化
• 常见问题
• CHANGELOG

👌 平台支持

Semi UI 支持所有主流浏览器。

|
chrome|
firefox|
safari|
IE/Edge|
Electron| |--|--|--|--|--| | latest 2 versions | latest 2 versions | latest 2 versions | Edge | latest 2 versions |

👐 贡献指南

阅读贡献指南了解我们的开发流程，包括开发规范、测试规范和构建规范等。

CONTRIBUTING

👨‍👨‍👧‍👦 交流群

有任何问题可以进群交流，我们会及时给予解答和反馈。

加入用户群.

💖 Thanks

感谢 Chromatic 提供可视化测试平台，帮助我们审查 UI 更改和提供视觉回归测试。

🎈 协议

Semi UI 使用 MIT 协议