🚀A modern, comprehensive, flexible design system and React UI library. 🎨 Provide more than 3000+ Design Tokens, easy to build your design system. Make Semi Design to Any Design. 🧑🏻💻 Design to Code in one click
OTHER License
简体中文 | English
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 官网 拥有上千个支持实时调试的例子,欢迎体验使用。
安装插件 Semi Figma Plugin. 数秒内将 Figma 转为真实前端代码,支持多种出码格式: JSX + SCSS / Emotion/Tailwind、 JSON Schema DSL
基于 Semi UI 定制你的专属设计系统, 提供高达 2700+ Token 允许你定义每一处细节. 并时刻在 Figma 与主题商店间保持同步。
Semi UI 支持所有主流浏览器。
chrome | firefox | safari | IE/Edge | Electron |
---|---|---|---|---|
latest 2 versions | latest 2 versions | latest 2 versions | Edge | latest 2 versions |
有任何问题可以进群交流,我们会及时给予解答和反馈。
加入飞书用户群.
感谢 Chromatic 提供可视化测试平台,帮助我们审查 UI 更改和提供视觉回归测试。
感谢 Cypress 提供 E2E 测试。
Semi Design 欢迎社区开发者参与共建,衷心感谢每一位协作者的付出
阅读贡献指南了解我们的开发流程,包括开发规范、测试规范和构建规范等: CONTRIBUTING
Semi UI 使用 MIT 协议