快速搭建美观的 React 应用。由抖音前端与 UED 团队维护。 https://semi.design/

shijia.me 3bab702111 fix: fix Table resize wip		2 anni fa
.codesandbox	fd9f597550 Chore: update storybook & Webpack & Cypress (#1589)	2 anni fa
.github	fd9f597550 Chore: update storybook & Webpack & Cypress (#1589)	2 anni fa
.storybook	fd9f597550 Chore: update storybook & Webpack & Cypress (#1589)	2 anni fa
.vscode	a1aba4ae8d fix: single select will flush when filter is true, close #1207 (#1276)	2 anni fa
content	7857f11a31 docs: optimize Slider docs, fix spell error (#1625)	2 anni fa
cypress	95151d6591 fix: Table onChange filters is empty when onFilter is not passing #1572 (#1619)	2 anni fa
packages	3bab702111 fix: fix Table resize wip	2 anni fa
plugins	f76bd5879d feat: init	4 anni fa
scripts	72169a18fa build: fix changelog feat type bug	2 anni fa
search	708df1978f chore: update search data	3 anni fa
src	52c1881f27 fix: Fix the wrong background color of different themes on the homepage (#1588)	2 anni fa
static	ed6798dead docs: update v2.7.0 changelog	3 anni fa
test	5244bea095 chore: add jest resizeobserver polyfill	3 anni fa
.commitlintrc.js	f76bd5879d feat: init	4 anni fa
.eslintignore	f76bd5879d feat: init	4 anni fa
.eslintrc.js	fd9f597550 Chore: update storybook & Webpack & Cypress (#1589)	2 anni fa
.gitattributes	8337c6d90a Update .gitattributes	3 anni fa
.gitignore	f8d62f4c66 test: [Image] add test cases for Image (#1236)	2 anni fa
.lighthouserc.js	fb91638513 chore(ci): lighthouse (#380)	3 anni fa
.npmrc	37f53d3a5e chore: update yarn.lock	3 anni fa
.prettierrc.js	f76bd5879d feat: init	4 anni fa
.stylelintrc.js	c5917caa93 chore: change stylelint rules	2 anni fa
CODE_OF_CONDUCT.md	0e46959d60 Create CODE_OF_CONDUCT.md	4 anni fa
CONTRIBUTING-en-US.md	110db20637 docs: update CONTRIBUTING.md	3 anni fa
CONTRIBUTING.md	d7e8271733 docs: update CONTRIBUTING.md	3 anni fa
LICENSE	15deb4dd41 Update LICENSE	4 anni fa
README-zh_CN.md	040a38a101 Update README-zh_CN.md	2 anni fa
README.md	10320c6055 Update README.md	2 anni fa
babel.config.js	f76bd5879d feat: init	4 anni fa
cypress.config.ts	fd9f597550 Chore: update storybook & Webpack & Cypress (#1589)	2 anni fa
favicon.ico	f76bd5879d feat: init	4 anni fa
gatsby-browser.js	f76bd5879d feat: init	4 anni fa
gatsby-config.js	66559b4561 chore: add cdn config	2 anni fa
gatsby-node.js	a0adbe0217 Feat add material (#1465)	2 anni fa
gatsby-ssr.js	f76bd5879d feat: init	4 anni fa
jest.config.js	591051eb86 test: add istanbul ignore to some file and update jest exclude config	3 anni fa
lerna.json	bddc219454 v2.35.0	2 anni fa
nyc.config.js	591051eb86 test: add istanbul ignore to some file and update jest exclude config	3 anni fa
package.json	fd9f597550 Chore: update storybook & Webpack & Cypress (#1589)	2 anni fa
tsconfig.eslint.json	f76bd5879d feat: init	4 anni fa
tsconfig.json	ef2531c8be Fix strict ts (#314)	3 anni fa
yarn.lock	fd9f597550 Chore: update storybook & Webpack & Cypress (#1589)	2 anni fa

Semi-UI

现代、全面、灵活的设计系统和 UI 库。致力打通 DesignOps & DevOps ，快速搭建美观的 React 应用。

[![NPM][npm-badge]][npm-url] [![FIGMA][figma-badge]][figma-url] ![Design Token][Design Token] [![LICENSE][license-badge]][license-url] [![BUILD-JS][build-js-badge]][build-js-url] [![BUILD-CSS][build-css-badge]][build-css-url] [![CODECOV][codecov-badge]][codecov-url] [![Chromatic][chromatic-badge]][chromatic-url] [![Cypress][cypress-badge]][cypress-url]

简体中文 | English

🎉 特性

💪 60+高质量组件
💕 完善的无障碍支持，为所有组件提供遵循 W3C 标准的键盘交互、焦点管理和语义化
🎨 设计系统管理工具 Semi DSM，多达2000+ Design Token，快速定制你的专属设计系统
🌍 国际化支持 17 种语言，提供完备的多语言、多时区、RTL支持
💅 Code2Design，根据不同主题自动生成 Figma UI Kit，保持代码与设计同源
🚀 强大的 Design2Code支持，设计稿一键转代码，快速构建应用
⚙️ 稳定的质量保障，覆盖单元测试、E2E测试、视觉回归测试等多种测试手段
🥳 支持 SSR
👏 使用 TypeScript, 良好的类型定义，基于 Foundation / Adapter 架构，源码易于阅读 / 贡献

🔥 安装

# 使用 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 官网拥有上千个支持实时调试的例子，欢迎体验使用。