{"id":13422345,"url":"https://github.com/DouyinFE/semi-design","last_synced_at":"2025-03-15T12:30:43.340Z","repository":{"id":36956890,"uuid":"421001366","full_name":"DouyinFE/semi-design","owner":"DouyinFE","description":"🚀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 ","archived":false,"fork":false,"pushed_at":"2025-03-10T12:20:59.000Z","size":46028,"stargazers_count":8978,"open_issues_count":236,"forks_count":750,"subscribers_count":71,"default_branch":"main","last_synced_at":"2025-03-11T02:11:24.307Z","etag":null,"topics":["code2design","dark-mode","design-system","design2code","designops","designtocode","figma-plugin","react","theme","ui-libary"],"latest_commit_sha":null,"homepage":"https://semi.design","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DouyinFE.png","metadata":{"files":{"readme":"README-zh_CN.md","changelog":null,"contributing":"CONTRIBUTING-en-US.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-10-25T11:47:38.000Z","updated_at":"2025-03-10T17:54:56.000Z","dependencies_parsed_at":"2023-09-22T22:41:40.911Z","dependency_job_id":"c498be27-7498-4d7c-9ba8-f3f00084dc4b","html_url":"https://github.com/DouyinFE/semi-design","commit_stats":{"total_commits":3242,"total_committers":157,"mean_commits":20.64968152866242,"dds":0.7584824182603331,"last_synced_commit":"12a3d0cddd5dbb96b2d9e347ad20862cf5bc5049"},"previous_names":[],"tags_count":375,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DouyinFE%2Fsemi-design","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DouyinFE%2Fsemi-design/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DouyinFE%2Fsemi-design/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DouyinFE%2Fsemi-design/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DouyinFE","download_url":"https://codeload.github.com/DouyinFE/semi-design/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243558479,"owners_count":20310573,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["code2design","dark-mode","design-system","design2code","designops","designtocode","figma-plugin","react","theme","ui-libary"],"created_at":"2024-07-30T23:00:42.214Z","updated_at":"2025-03-15T12:30:43.330Z","avatar_url":"https://github.com/DouyinFE.png","language":"TypeScript","funding_links":[],"categories":["UI Frameworks","HarmonyOS","TypeScript","UI Frameworks \u0026 Libraries","Uncategorized","🌐 Web Development - Frontend"],"sub_categories":["Responsive","Windows Manager","style","Uncategorized"],"readme":"\u003cdiv align=\"center\"\u003e\n\u003carticle style=\"display: flex; flex-direction: column; align-items: center; justify-content: center;\"\u003e\n    \u003cp align=\"center\"\u003e\u003cimg width=\"300\" src=\"https://lf1-cdn-tos.bytescm.com/obj/ttfe/ies/semi/SemiLogo/Logo_1576122865926.png\" /\u003e\u003c/p\u003e\n    \u003ch1 style=\"width: 100%; text-align: center;\"\u003eSemi-UI\u003c/h1\u003e\n    \u003cp\u003e\n        现代、全面、灵活的设计系统和 UI 库。 致力打通 DesignOps \u0026 DevOps ，快速搭建美观的 React 应用。\n    \u003c/p\u003e\n\u003c/article\u003e\n    \n\u003cdiv align=\"center\"\u003e\n\n[![LICENSE][license-badge]][license-url] [![NPM][npm-badge]][npm-url] [![FIGMA][figma-badge]][figma-url] ![Design Token][Design Token] \n[![CODECOV][codecov-badge]][codecov-url] [![Chromatic][chromatic-badge]][chromatic-url] [![Cypress][cypress-badge]][cypress-url]\n[![Twitter Follow](https://img.shields.io/twitter/follow/SemiDesignUI?style=social)](https://twitter.com/SemiDesignUI)\n\n\n[npm-badge]: https://img.shields.io/npm/v/@douyinfe/semi-ui.svg\n[npm-url]: https://www.npmjs.com/package/@douyinfe/semi-ui\n[figma-badge]: https://img.shields.io/badge/Figma-UIKit-%2318a0fb\n[figma-url]: https://www.figma.com/@semi\n[Design Token]: https://img.shields.io/badge/Design%20Token-2739%2B-brightgreen\n[license-badge]: https://img.shields.io/npm/l/@douyinfe/semi-ui\n[license-url]: https://github.com/DouyinFE/semi-design/blob/main/LICENSE\n[codecov-badge]: https://img.shields.io/codecov/c/gh/DouyinFE/semi-design\n[codecov-url]: https://app.codecov.io/gh/DouyinFE/semi-design\n[chromatic-badge]: https://img.shields.io/badge/test-chromatic-f52\n[chromatic-url]: https://www.chromatic.com/\n[cypress-badge]: https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/simple/k83u7j\u0026style=flat\u0026logo=cypress\n[cypress-url]: https://dashboard.cypress.io/projects/k83u7j/runs\n\n[build-js-badge]: https://img.badgesize.io/https:/unpkg.com/@douyinfe/semi-ui/dist/umd/semi-ui.min.js?label=semi.min.js\u0026compression=gzip\n[build-js-url]: https://unpkg.com/browse/@douyinfe/semi-ui/dist/umd/semi-ui.min.js\n[build-css-badge]: https://img.badgesize.io/https:/unpkg.com/@douyinfe/semi-ui/dist/css/semi.min.css?label=semi.min.css\u0026compression=gzip\n[build-css-url]: https://unpkg.com/browse/@douyinfe/semi-ui/dist/css/semi.min.css\n\n\u003c/div\u003e\n\n\u003cp\u003e\n    \u003cimg src=\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/semi-info-1.gif\" /\u003e\n\u003c/p\u003e\n\n简体中文 | [English](./README.md)\n\n\u003c/div\u003e\n\n# 🎉 特性\n\n- 💪 70+高质量组件\n- 💅 Code2Design，根据不同主题自动生成 Figma UI Kit，保持代码与设计同源\n- 🚀 强大的 D2C （Design2Code）支持，Figma 设计稿一键转出真实代码，快速构建应用\n- 💕 完善的无障碍支持，为所有组件提供遵循 W3C 标准的键盘交互、焦点管理和语义化\n- 🎨 设计系统管理工具 Semi DSM，多达2000+ Design Token，快速定制你的专属设计系统\n- 🌍 国际化支持 20+ 语言，提供完备的多语言、多时区、RTL支持\n- ⚙️ 稳定的质量保障，覆盖单元测试、E2E测试、视觉回归测试等多种测试手段\n- 🥳 支持 SSR\n- 👏 使用 TypeScript, 良好的类型定义，基于 Foundation / Adapter 架构，源码易于阅读 / 贡献\n- 📦 轻松兼容 web components，提供完整适配方案，更适合用于构建 SDK、浏览器插件等需要 DOM 隔离的场景\n\n# 🔥 安装\n\n```sh\nnpm install @douyinfe/semi-ui\n```\n\n# 👍 组件使用\n\n这是一个快速开始的例子：\n\n```jsx\nimport React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { Button, Form } from '@douyinfe/semi-ui';\n\nconst App = () =\u003e (\n    \u003cForm\u003e\n        \u003cForm.Input field='name' initValue='semi design'\u003e\u003c/Form.Input\u003e\n        \u003cButton htmlType='submit'\u003esubmit\u003c/Button\u003e\n    \u003c/Form\u003e\n);\n\nconst root = createRoot(document.querySelector('#app'));\nroot.render(\u003cApp /\u003e);\n```\n\n[Semi UI 官网](https://semi.design) 拥有上千个支持实时调试的例子，欢迎体验使用。\n\n# ⚡️ D2C 设计稿转代码\n\n安装插件 [Semi Figma Plugin](https://www.figma.com/community/plugin/1166339852662786534/Semi-Design-%E8%AE%BE%E8%AE%A1%E8%BD%AC%E4%BB%A3%E7%A0%81). 数秒内将 Figma 转为真实前端代码，支持多种出码格式： JSX + SCSS / Emotion/Tailwind、 JSON Schema DSL\n\n- 支持 Figma Devmode，选中图层后，右侧可直接查看对应的真实代码\n  \n![design2code](https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/github/devmode.gif)\n\n- 或跳转至 Codesandbox 进行二次编辑\n  \n![codesandboxdemo](https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/github/1080p-fps5.gif)\n\n\n# 🎨 DSM 设计系统管理\n\n基于 Semi UI 定制你的专属设计系统, 提供高达 3000+ Token 允许你定义每一处细节. 并时刻在 Figma 与主题商店间保持同步。\n\n![dsmintro](https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/github/dsmintro.png)\n\n\n# 📰 关注我们的动态\n* [Follow on Twitter](https://twitter.com/SemiDesignUI)\n* [Follow on Medium](https://medium.com/@semi-design)\n* [Follow on Dev.to](https://dev.to/semidesign)\n\n# 📌 文档\n* [Semi DSM](https://semi.design/dsm)\n* [Semi Design2Code](https://semi.design/code)\n* [Semi Figma Plugin](https://www.figma.com/community/plugin/1166339852662786534/Semi-Design-%E8%AE%BE%E8%AE%A1%E8%BD%AC%E4%BB%A3%E7%A0%81)\n* [快速开始](https://semi.design/zh-CN/start/getting-started)\n* [组件总览](https://semi.design/zh-CN/start/overview)\n* [自定义主题](https://semi.design/zh-CN/start/customize-theme)\n* [DSM主题商店](https://semi.design/dsm_store)\n* [Design Tokens](https://semi.design/zh-CN/basic/tokens)\n* [暗色模式](https://semi.design/zh-CN/start/dark-mode)\n* [Icons](https://semi.design/zh-CN/basic/icon)\n* [全局配置](https://semi.design/zh-CN/other/configprovider)\n* [国际化](https://semi.design/zh-CN/other/locale)\n* [常见问题](https://semi.design/zh-CN/start/faq)\n* [CHANGELOG](https://semi.design/zh-CN/start/changelog)\n\n# 👌 平台支持\n\nSemi UI 支持所有主流浏览器。\n\n|[\u003cimg alt=\"chrome\" height=\"24px\" src=\"https://cdnjs.cloudflare.com/ajax/libs/browser-logos/70.4.0/chrome/chrome.png\" /\u003e](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/70.4.0/chrome/chrome.png)\u003cbr\u003echrome|[\u003cimg alt=\"firefox\" height=\"24px\" src=\"https://cdnjs.cloudflare.com/ajax/libs/browser-logos/70.4.0/firefox/firefox.png\" /\u003e](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/70.4.0/firefox/firefox.png)\u003cbr\u003efirefox|[\u003cimg alt=\"safari\" height=\"24px\" src=\"https://cdnjs.cloudflare.com/ajax/libs/browser-logos/70.4.0/safari/safari.png\" /\u003e](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/70.4.0/safari/safari.png)\u003cbr\u003esafari|[\u003cimg alt=\"IE/Edge\" height=\"24px\" src=\"https://cdnjs.cloudflare.com/ajax/libs/browser-logos/70.4.0/edge/edge.png\" /\u003e](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/70.4.0/edge/edge.png)\u003cbr\u003e IE/Edge|[\u003cimg alt=\"electron\" height=\"24px\" src=\"https://cdnjs.cloudflare.com/ajax/libs/browser-logos/70.4.0/electron/electron.png\" /\u003e](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/70.4.0/electron/electron.png)\u003cbr\u003eElectron|\n|--|--|--|--|--|\n| latest 2 versions | latest 2 versions | latest 2 versions | Edge | latest 2 versions |\n\n# 👨‍👨‍👧‍👦 交流群\n\n有任何问题可以进群交流，我们会及时给予解答和反馈。\n\n加入飞书[用户群](https://bytedance.feishu.cn/docs/doccnw93Dujm3UCkHRDTMTm1qwe#).\n\n# 💖 Thanks\n\n\u003ca href=\"https://www.chromatic.com/\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/321738/84662277-e3db4f80-af1b-11ea-88f5-91d67a5e59f6.png\" width=\"153\" height=\"30\" alt=\"Chromatic\" /\u003e\u003c/a\u003e\n\n感谢 [Chromatic](https://www.chromatic.com/) 提供可视化测试平台，帮助我们审查 UI 更改和提供视觉回归测试。\n\n\u003ca href=\"https://www.cypress.io/\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/26477537/147624641-1274a91d-bc4c-463e-af1a-dbf15de54c49.png\" width=\"90\" height=\"30\" alt=\"Cypress\" /\u003e\u003c/a\u003e\n\n感谢 [Cypress](https://www.cypress.io/) 提供 E2E 测试。\n\n\u003cdiv\u003e\n  \u003ca href=\"https://github.com/VisActor#gh-light-mode-only\" target=\"_blank\"\u003e\n    \u003cimg alt=\"VisActor Logo\" height=\"60\" src=\"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/visactor/logo_500_200_light.svg\"/\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/VisActor#gh-dark-mode-only\" target=\"_blank\"\u003e\n    \u003cimg alt=\"VisActor Logo\" height=\"60\" src=\"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/visactor/logo_500_200_dark.svg\"/\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n感谢 [VisActor](https://www.visactor.com/) 提供数据可视化解决方案。\n\n## 👐 参与共建\nSemi Design 欢迎社区开发者参与共建，衷心感谢每一位协作者的付出\n\n\u003ca href=\"https://github.com/DouyinFE/semi-design/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=DouyinFE/semi-design\" /\u003e\n\u003c/a\u003e\n\n阅读贡献指南了解我们的开发流程，包括开发规范、测试规范和构建规范等： [CONTRIBUTING](CONTRIBUTING.md)\n\n# 🎈 协议\n\nSemi UI 使用 [MIT 协议](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDouyinFE%2Fsemi-design","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FDouyinFE%2Fsemi-design","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDouyinFE%2Fsemi-design/lists"}