semi-design README

The project's README from github.com/DouyinFE/semi-design. As one markdown file: README.md.

Semi-UI

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

Twitter Follow

LICENSE NPM CONTRIBUTORS Design Token FIGMA CODECOV Chromatic Cypress

English | 简体中文

🎉 Features

🔥 Install

npm install @douyinfe/semi-ui

yarn add @douyinfe/semi-ui

pnpm add @douyinfe/semi-ui

👍 Component Usage

Here is a quick example to get you started, it's all you need:

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 Doc Site has hundreds of editable examples and live preview, welcome to play with those examples.

⚡️ Design to Code Usage

Install Semi Figma Plugin. Translate Figma to real code in seconds. Support multiple output formats: JSX + SCSS / Emotion/Tailwind, or JSON Schema DSL

design2code

codesandboxdemo

🎨 DSM Usage

Define your own design system based on Semi UI with DSM in one click, Provide more than 3000 tokens for you to configure every detail. Sync between Figma and Code always.

dsmintro

📰 News about Semi UI

📌 Documentation

📝 Blogs

👌 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

👨‍👨‍👧‍👦 User Group

Join User Group on Feishu / Lark

💖 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.

VisActor Logo VisActor Logo

Thanks to VisActor for providing the data visualization solution.

👐 Contributing

Thanks to all the people who already contributed!

Read the contributing guide to learn about our development process, how to propose bug fixes and improvements, and how to build and test your changes to Semi UI.

See CONTRIBUTING documentation.

🎈 License

Semi UI is MIT Licensed

Star History

Star History Chart

semi-design (DouyinFE/semi-design)

Searching Database…

10.4K ·GitHub
Semi-design
这是什么?Semi Design 是一套完整的设计系统和 React UI 组件库:包含 80 多个自 2019 年以来保持稳定、达到生产级质量的组件,还提供连接设计与代码的工具——一个 Figma Design-to-Code(设计转代码)插件,以及用于自定义设计变量的 DSM 平台。
它是我搭建整个应用所依赖的框架,还是一个可以按需取用组件的组件库?它是库,不是框架——你通过 npm 安装 @douyinfe/semi-ui,在现有的 React 应用里只引入需要的组件即可。它用 TypeScript 编写,视觉和逻辑分别放在 semi-ui 和 semi-foundation 两个包中。
我怎么把它装到我的项目里?运行 npm install @douyinfe/semi-ui,引入样式文件,然后就可以开始渲染组件了。官方文档站还提供数百个可编辑、带实时预览的示例,可以直接复制使用。
除了 React,我还需要别的东西吗?不需要——这些组件就是普通的 npm React 包,任何 React 应用都能用。只有当你自己构建文档站或整个 monorepo 时,才需要 Node.js 20+ 和 lerna。
它能在哪些浏览器里运行?所有主流现代浏览器都支持:Chrome、Firefox 和 Safari 的最新两个版本,此外根据官方支持表格还包括 Edge 和 Electron。列表里没有 IE——最低要求就是 Edge。
它能把我 Figma 里的设计稿转成能用的 React 代码吗?可以——官方提供 Design to Code(设计转代码)支持。Semi Figma 插件能在几秒钟内把 Figma 设计稿转换成真实代码:JSX + SCSS、Emotion 或 Tailwind,也可以是 JSON Schema DSL。配合 Figma 的 devmode,选中图层就能在面板里直接看到对应的代码,还能一键跳转到 CodeSandbox 继续编辑。
Semi DSM 是什么?它是基于 Semi UI 打造的设计系统管理平台:提供 3000 多个设计变量,可以配置每一个细节,让你一键把 Semi 改造成自己的设计系统,并保持 Figma 和代码同步。
反方向也行吗——从代码生成回 Figma?可以,这就是 Code to Design(C2D):它会根据你的主题自动生成一套 Figma UI Kit,让设计文件和代码保持一致。
这些组件开箱即用的无障碍支持怎么样?非常完善——Semi 声称遵循 W3C 标准,提供完整的 A11y(无障碍)支持,所有组件都具备键盘交互、焦点管理和 ARIA。
What are similar projects?arc-library, chakra-ui, ux-ui-agent-skills, boardui, open-claude-ui, fluentui, styled-components, astryx
Which topics is it in?design-tokens, web-components, figma, scss, ssr, dark-mode, design-system, theme, accessibility, tailwindcss, component-library, i18n
Creator
DouyinFE
Size
65.1 MB
Stars
10.4K
Updated
CommitOct 09Releasev2.88.2Nov 18
Age
4y
Commits · 90 Days