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

point.halo d04404e836 v2.90.1-alpha.3		3 هفته پیش
.codesandbox	7648406c76 chore: update codesandbox ci.json, node 16 -> 20	1 سال پیش
.github	46c4ac7f94 chore: update npm token in yml	1 ماه پیش
.storybook	5e4741f343 feat: json-viewer-core hmr	1 سال پیش
.vscode	f79576d9ce fix: autoComplete can't scroll when keyboard up and down, #1530 (#2501)	1 سال پیش
content	0dc77d67df Merge branch 'docs-replaceClassDemo'	4 هفته پیش
cypress	417c859d0f fix: fixed The problems in the use of Tooltip in components(AudioPlay… (#3039)	2 ماه پیش
packages	d04404e836 v2.90.1-alpha.3	3 هفته پیش
plugins	395ecb1b03 feat: add docs of lab icon (#1956)	2 سال پیش
scripts	dffc5da033 fix: Site anchor pos; changelog script path	3 هفته پیش
search	708df1978f chore: update search data	3 سال پیش
semi-playground-for-ai	7bdc234e44 chore: add semi-playground-for-ai	1 ماه پیش
src	192cebabf1 docs: hide footer in api page	3 هفته پیش
static	7d72163a34 chore: add sitemap url to robots.txt	2 سال پیش
test	04773631a5 test: mdx/js cjs module compile by esbuild may cause error because missing strict mode, access variable before initialization	1 سال پیش
.commitlintrc.js	f76bd5879d feat: init	4 سال پیش
.eslintignore	f76bd5879d feat: init	4 سال پیش
.eslintrc.js	75fa2004e5 feat: add new component Json viewer (#2561)	1 سال پیش
.gitattributes	8337c6d90a Update .gitattributes	4 سال پیش
.gitignore	0b7c014458 chore: add gitignore	8 ماه پیش
.lighthouserc.js	fb91638513 chore(ci): lighthouse (#380)	4 سال پیش
.npmrc	37f53d3a5e chore: update yarn.lock	4 سال پیش
.prettierrc.js	f76bd5879d feat: init	4 سال پیش
.stylelintrc.js	c5917caa93 chore: change stylelint rules	2 سال پیش
CODE_OF_CONDUCT.md	0e46959d60 Create CODE_OF_CONDUCT.md	4 سال پیش
CONTRIBUTING-en-US.md	847a1306fb docs: update contributing doc of lerna version (#2692)	11 ماه پیش
CONTRIBUTING.md	847a1306fb docs: update contributing doc of lerna version (#2692)	11 ماه پیش
LICENSE	15deb4dd41 Update LICENSE	4 سال پیش
README-zh_CN.md	747f2c043b docs: update component demo	4 هفته پیش
README.md	747f2c043b docs: update component demo	4 هفته پیش
babel.config.js	73022d6c8a Plus/markdown render (#2196)	1 سال پیش
create_symlinks.sh	3a7a6d1e55 chore: update ci workflow node 16 -> node 20 (#2109)	1 سال پیش
cypress.config.ts	f399585b94 fix: upload addOnPasting can't work in Sidesheet, close #2478 (#2480)	1 سال پیش
favicon.ico	f76bd5879d feat: init	4 سال پیش
gatsby-browser.js	f76bd5879d feat: init	4 سال پیش
gatsby-config.js	66559b4561 chore: add cdn config	3 سال پیش
gatsby-node.js	5e4741f343 feat: json-viewer-core hmr	1 سال پیش
gatsby-ssr.js	f76bd5879d feat: init	4 سال پیش
jest.config.js	1b5363b1f6 chore: Add tiptap/promisemirror to the babel-jest processing logic in jest.confige.js	2 ماه پیش
lerna.json	d04404e836 v2.90.1-alpha.3	3 هفته پیش
nyc.config.js	591051eb86 test: add istanbul ignore to some file and update jest exclude config	3 سال پیش
package.json	3bfbf4f8bb Feat/semi UI 19 (#2996)	2 ماه پیش
sitemap.xml	db120c0dbe chore: publish 2.90.0	4 هفته پیش
syncRegistry.sh	3a6dbc59b6 chore: add some package to sync script	1 سال پیش
temp.txt	66d1be95fd Feat dialogue (#2997)	2 ماه پیش
tsconfig.eslint.json	f76bd5879d feat: init	4 سال پیش
tsconfig.json	a7dd89e4e1 chore: lint add space-infix-ops	1 سال پیش
yarn.lock	747f2c043b docs: update component demo	4 هفته پیش

Semi-UI

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

[![LICENSE][license-badge]][license-url] [![NPM][npm-badge]][npm-url] [![FIGMA][figma-badge]][figma-url] ![Design Token][Design Token] [![CODECOV][codecov-badge]][codecov-url] [![Chromatic][chromatic-badge]][chromatic-url] [![Cypress][cypress-badge]][cypress-url] [![Twitter Follow](https://img.shields.io/twitter/follow/SemiDesignUI?style=social)](https://twitter.com/SemiDesignUI)

简体中文 | English

🎉 特性

💪 80+高质量组件
💅 Code2Design，根据不同主题自动生成 Figma UI Kit，保持代码与设计同源
🚀 强大的 D2C （Design2Code）支持，Figma 设计稿一键转出真实代码，快速构建应用
💕 完善的无障碍支持，为所有组件提供遵循 W3C 标准的键盘交互、焦点管理和语义化
🎨 设计系统管理工具 Semi DSM，多达2000+ Design Token，快速定制你的专属设计系统
🌍 国际化支持 50+ 语言，提供完备的多语言、多时区、RTL支持
⚙️ 稳定的质量保障，覆盖单元测试、E2E测试、视觉回归测试等多种测试手段
🥳 支持 SSR
👏 使用 TypeScript, 良好的类型定义，基于 Foundation / Adapter 架构，源码易于阅读 / 贡献
📦 轻松兼容 web components，提供完整适配方案，更适合用于构建 SDK、浏览器插件等需要 DOM 隔离的场景

🔥 安装

npm install @douyinfe/semi-ui

👍 组件使用

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

import React from 'react';
import { createRoot } from 'react-dom/client';
import { Button, Form } from '@douyinfe/semi-ui';

const App = () => (
    <Form>
        <Form.Input field='name' initValue='semi design'></Form.Input>
        <Button htmlType='submit'>submit</Button>
    </Form>
);

const root = createRoot(document.querySelector('#app'));
root.render(<App />);

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