[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-71288":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":25,"hasPages":23,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":38,"readmeContent":39,"aiSummary":40,"trendingCount":16,"starSnapshotCount":16,"syncStatus":15,"lastSyncTime":41,"discoverSource":42},71288,"semi-design","DouyinFE\u002Fsemi-design","DouyinFE","🚀A modern, comprehensive, flexible design system and React UI library, AI-friendly built-in.🎨Provide 3000+ Design Tokens, easy to build your design system. Make Semi Design to Any Design.🧑🏻‍💻 Design to Code in one click","https:\u002F\u002Fsemi.design",null,"TypeScript",9987,813,67,2,0,60,74,116,180,39.73,"Other",false,"main",true,[27,28,29,30,31,32,33,34,35,36,37],"ai-friendly","code2design","dark-mode","design-system","design2code","designops","designtocode","figma-plugin","react","theme","ui-libary","2026-06-12 02:02:50","\u003Cdiv align=\"center\">\n\u003Carticle style=\"display: flex; flex-direction: column; align-items: center; justify-content: center;\">\n    \u003Cp align=\"center\">\u003Cimg width=\"300\" src=\"https:\u002F\u002Flf1-cdn-tos.bytescm.com\u002Fobj\u002Fttfe\u002Fies\u002Fsemi\u002FSemiLogo\u002FLogo_1576122865926.png\" \u002F>\u003C\u002Fp>\n    \u003Ch1 style=\"width: 100%; text-align: center;\">Semi-UI\u003C\u002Fh1>\n    \u003Cp>\n        A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps.\n    \u003C\u002Fp>\n\u003C\u002Farticle>\n\n\u003Cdiv align=\"center\">\n\n[![Twitter Follow](https:\u002F\u002Fimg.shields.io\u002Ftwitter\u002Ffollow\u002FSemiDesignUI?style=social)](https:\u002F\u002Ftwitter.com\u002FSemiDesignUI)\n\n[![LICENSE][license-badge]][license-url] [![NPM][npm-badge]][npm-url] [![CONTRIBUTORS][contributors-badge]][contributors-url]  ![Design Token][Design Token] [![FIGMA][figma-badge]][figma-url]\n[![CODECOV][codecov-badge]][codecov-url] [![Chromatic][chromatic-badge]][chromatic-url] [![Cypress][cypress-badge]][cypress-url]\n\n[npm-badge]: https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@douyinfe\u002Fsemi-ui.svg\n[contributors-badge]: https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fcontributors\u002FDouyinFE\u002Fsemi-design\n[contributors-url]: https:\u002F\u002Fgithub.com\u002FDouyinFE\u002Fsemi-design\u002Fgraphs\u002Fcontributors\n[Design Token]: https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FDesign%20Token-2739%2B-brightgreen\n[npm-url]: https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@douyinfe\u002Fsemi-ui\n[figma-badge]: https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FFigma-UIKit-%2318a0fb\n[figma-url]: https:\u002F\u002Fwww.figma.com\u002F@semi\n\n[license-badge]: https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fl\u002F@douyinfe\u002Fsemi-ui\n[license-url]: https:\u002F\u002Fgithub.com\u002FDouyinFE\u002Fsemi-design\u002Fblob\u002Fmain\u002FLICENSE\n[codecov-badge]: https:\u002F\u002Fimg.shields.io\u002Fcodecov\u002Fc\u002Fgh\u002FDouyinFE\u002Fsemi-design\n[codecov-url]: https:\u002F\u002Fapp.codecov.io\u002Fgh\u002FDouyinFE\u002Fsemi-design\n[chromatic-badge]: https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Ftest-chromatic-brightgreen\n[chromatic-url]: https:\u002F\u002Fwww.chromatic.com\u002F\n[cypress-badge]: https:\u002F\u002Fimg.shields.io\u002Fendpoint?url=https:\u002F\u002Fdashboard.cypress.io\u002Fbadge\u002Fsimple\u002Fk83u7j&style=flat&logo=cypress\n[cypress-url]: https:\u002F\u002Fdashboard.cypress.io\u002Fprojects\u002Fk83u7j\u002Fruns\n\n[build-js-badge]: https:\u002F\u002Fimg.badgesize.io\u002Fhttps:\u002Funpkg.com\u002F@douyinfe\u002Fsemi-ui\u002Fdist\u002Fumd\u002Fsemi-ui.min.js?label=semi.min.js&compression=gzip\n[build-js-url]: https:\u002F\u002Funpkg.com\u002Fbrowse\u002F@douyinfe\u002Fsemi-ui\u002Fdist\u002Fumd\u002Fsemi-ui.min.js\n[build-css-badge]: https:\u002F\u002Fimg.badgesize.io\u002Fhttps:\u002Funpkg.com\u002F@douyinfe\u002Fsemi-ui\u002Fdist\u002Fcss\u002Fsemi.min.css?label=semi.min.css&compression=gzip\n[build-css-url]: https:\u002F\u002Funpkg.com\u002Fbrowse\u002F@douyinfe\u002Fsemi-ui\u002Fdist\u002Fcss\u002Fsemi.min.css\n\n\u003C\u002Fdiv>\n\n\u003Cp>\n    \u003Cimg src=\"https:\u002F\u002Flf3-static.bytednsdoc.com\u002Fobj\u002Feden-cn\u002Fptlz_zlp\u002FljhwZthlaukjlkulzlp\u002Fsemi-info-1.gif\" \u002F>\n\u003C\u002Fp>\n\nEnglish | [简体中文](.\u002FREADME-zh_CN.md)\n\n\u003C\u002Fdiv>\n\n# 🎉 Features\n\n- 💪 Up to 80+ high-quality Components. Stable updates since 2019\n- 🚀 Official Design to Code (D2C) support, convert Figma draft to real code in a few seconds\n- 💅 Code to Design (C2D), automatically generate Figma UI Kit according to different themes, keep consistency  between design and code\n- 💕 Complete A11y support, follows W3C standards to provide keyboard interaction, focus management and ARIA for all components\n- 💅 Design system management Semi DSM, up to 3000+ Design Tokens, make Semi Design to Any Design quickly.\n- 🌍 Internationalization Support for Dozens of Languages, timezone, and RTL support\n- ⚙️ Strict quality assurance, covering unit testing, E2E testing, and visual testing.\n- 👏 Written in Typescript, friendly Static Type Support. Based on Foundation\u002FAdapter architecture, easy to read and contribute\n- 🥳 SSR (Server Side Rendering) Compatible.\n- 📦 Easily compatible with web components, providing a complete adaptation solution, more suitable for building SDKs, browser plugins and other scenarios that require DOM isolation.\n\n# 🔥 Install\n\n```bash\nnpm install @douyinfe\u002Fsemi-ui\n```\n\n```bash\nyarn add @douyinfe\u002Fsemi-ui\n```\n\n```bash\npnpm add @douyinfe\u002Fsemi-ui\n```\n\n# 👍 Component Usage\n\nHere is a quick example to get you started, it's all you need:\n\n```jsx\nimport React from 'react';\nimport { createRoot } from 'react-dom\u002Fclient';\nimport { Button, Form } from '@douyinfe\u002Fsemi-ui';\n\nconst App = () => (\n    \u003CForm>\n        \u003CForm.Input field='name' initValue='semi design'>\u003C\u002FForm.Input>\n        \u003CButton htmlType='submit'>submit\u003C\u002FButton>\n    \u003C\u002FForm>\n);\n\nconst root = createRoot(document.querySelector('#app'));\n\nroot.render(\u003CApp \u002F>);\n```\n\n[Semi UI Doc Site](https:\u002F\u002Fsemi.design\u002Fen-US\u002F) has hundreds of editable examples and live preview, welcome to play with those examples.\n\n# ⚡️ Design to Code Usage\n\nInstall [Semi Figma Plugin](https:\u002F\u002Fwww.figma.com\u002Fcommunity\u002Fplugin\u002F1166339852662786534\u002FSemi-Design-%E8%AE%BE%E8%AE%A1%E8%BD%AC%E4%BB%A3%E7%A0%81). Translate Figma to real code in seconds. Support multiple output formats: JSX + SCSS \u002F Emotion\u002FTailwind, or JSON Schema DSL\n\n- Support Figma devmode, selecting a layer, directly get corresponding code on the right\n  \n![design2code](https:\u002F\u002Flf3-static.bytednsdoc.com\u002Fobj\u002Feden-cn\u002Fptlz_zlp\u002FljhwZthlaukjlkulzlp\u002Fgithub\u002Fdevmode.gif)\n\n- Or jump to codesandbox to continue editing\n  \n![codesandboxdemo](https:\u002F\u002Flf3-static.bytednsdoc.com\u002Fobj\u002Feden-cn\u002Fptlz_zlp\u002FljhwZthlaukjlkulzlp\u002Fgithub\u002F1080p-fps5.gif)\n\n# 🎨 DSM Usage\n\nDefine 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.\n\n![dsmintro](https:\u002F\u002Flf3-static.bytednsdoc.com\u002Fobj\u002Feden-cn\u002Fptlz_zlp\u002FljhwZthlaukjlkulzlp\u002Fgithub\u002Fdsmintro.png)\n\n# 📰 News about Semi UI\n\n- [Follow on Twitter](https:\u002F\u002Ftwitter.com\u002FSemiDesignUI)\n- [Follow on Medium](https:\u002F\u002Fmedium.com\u002F@semi-design)\n- [Follow on Dev.to](https:\u002F\u002Fdev.to\u002Fsemidesign)\n\n# 📌 Documentation\n\n- [Semi DSM](https:\u002F\u002Fsemi.design\u002Fdsm)\n- [Design to Code](https:\u002F\u002Fsemi.design\u002Fcode\u002Fen-US)\n- [Semi Figma Plugin](https:\u002F\u002Fwww.figma.com\u002Fcommunity\u002Fplugin\u002F1166339852662786534\u002FSemi-Design-%E8%AE%BE%E8%AE%A1%E8%BD%AC%E4%BB%A3%E7%A0%81)\n- [Quick Start](https:\u002F\u002Fsemi.design\u002Fen-US\u002Fstart\u002Fgetting-started)\n- [Components Overview](https:\u002F\u002Fsemi.design\u002Fen-US\u002Fstart\u002Foverview)\n- [Customizing Themes](https:\u002F\u002Fsemi.design\u002Fen-US\u002Fstart\u002Fcustomize-theme)\n- [Design Tokens](https:\u002F\u002Fsemi.design\u002Fen-US\u002Fbasic\u002Ftokens)\n- [Dark Mode](https:\u002F\u002Fsemi.design\u002Fen-US\u002Fstart\u002Fdark-mode)\n- [Semi Icons](https:\u002F\u002Fsemi.design\u002Fen-US\u002Fbasic\u002Ficon)\n- [Global Config](https:\u002F\u002Fsemi.design\u002Fen-US\u002Fother\u002Fconfigprovider)\n- [Internationalization](https:\u002F\u002Fsemi.design\u002Fen-US\u002Fother\u002Flocale)\n- [FAQ](https:\u002F\u002Fsemi.design\u002Fen-US\u002Fstart\u002Ffaq)\n- [CHANGELOG](https:\u002F\u002Fsemi.design\u002Fen-US\u002Fstart\u002Fchangelog)\n\n# 📝 Blogs\n\n- [The Evolution of Semi D2C Design to Code](https:\u002F\u002Fjuejin.cn\u002Fpost\u002F7267418854124699702)\n- [How to design component library architecture to adapt to different mvvm frameworks](https:\u002F\u002Fbytedance.feishu.cn\u002Fwiki\u002FwikcnOVYexosCS1Rmvb5qCsWT1f)\n- [How we test semi ui](https:\u002F\u002Fmedium.com\u002Ffront-end-weekly\u002Fhow-we-test-semi-design-component-libraries-64b854f63b65)\n- [In-depth explanation of Semi theme](https:\u002F\u002Fmp.weixin.qq.com\u002Fs\u002FnoHoWRuA25PgqFNcurhIUA)\n- [Accessibility in Semi Design](https:\u002F\u002Fmp.weixin.qq.com\u002Fs\u002FO3js-SZDNPEOjGxh-aAkbw)\n\n# 👌 Platform Support\n\nSemi UI supports all major modern browsers.\n\n|[\u003Cimg alt=\"chrome\" height=\"24px\" src=\"https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fbrowser-logos\u002F70.4.0\u002Fchrome\u002Fchrome.png\" \u002F>](https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fbrowser-logos\u002F70.4.0\u002Fchrome\u002Fchrome.png)\u003Cbr>chrome|[\u003Cimg alt=\"firefox\" height=\"24px\" src=\"https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fbrowser-logos\u002F70.4.0\u002Ffirefox\u002Ffirefox.png\" \u002F>](https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fbrowser-logos\u002F70.4.0\u002Ffirefox\u002Ffirefox.png)\u003Cbr>firefox|[\u003Cimg alt=\"safari\" height=\"24px\" src=\"https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fbrowser-logos\u002F70.4.0\u002Fsafari\u002Fsafari.png\" \u002F>](https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fbrowser-logos\u002F70.4.0\u002Fsafari\u002Fsafari.png)\u003Cbr>safari|[\u003Cimg alt=\"IE\u002FEdge\" height=\"24px\" src=\"https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fbrowser-logos\u002F70.4.0\u002Fedge\u002Fedge.png\" \u002F>](https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fbrowser-logos\u002F70.4.0\u002Fedge\u002Fedge.png)\u003Cbr> IE\u002FEdge|[\u003Cimg alt=\"electron\" height=\"24px\" src=\"https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fbrowser-logos\u002F70.4.0\u002Felectron\u002Felectron.png\" \u002F>](https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fbrowser-logos\u002F70.4.0\u002Felectron\u002Felectron.png)\u003Cbr>Electron|\n|--|--|--|--|--|\n| latest 2 versions | latest 2 versions | latest 2 versions | Edge | latest 2 versions |\n\n# 👨‍👨‍👧‍👦 User Group\n\nJoin [User Group](https:\u002F\u002Fbytedance.feishu.cn\u002Fdocs\u002Fdoccnw93Dujm3UCkHRDTMTm1qwe#) on Feishu \u002F Lark\n\n# 💖 Thanks\n\n\u003Ca href=\"https:\u002F\u002Fwww.chromatic.com\u002F\">\u003Cimg src=\"https:\u002F\u002Fuser-images.githubusercontent.com\u002F321738\u002F84662277-e3db4f80-af1b-11ea-88f5-91d67a5e59f6.png\" width=\"153\" height=\"30\" alt=\"Chromatic\" \u002F>\u003C\u002Fa>\n\nThanks to [Chromatic](https:\u002F\u002Fwww.chromatic.com\u002F) for providing the visual testing platform that helps us review UI changes and catch visual regressions.\n\n\u003Ca href=\"https:\u002F\u002Fwww.cypress.io\u002F\">\u003Cimg src=\"https:\u002F\u002Fuser-images.githubusercontent.com\u002F26477537\u002F147624641-1274a91d-bc4c-463e-af1a-dbf15de54c49.png\" width=\"90\" height=\"30\" alt=\"Cypress\" \u002F>\u003C\u002Fa>\n\nThanks to [Cypress](https:\u002F\u002Fwww.cypress.io\u002F) for providing E2E testing.\n\n\u003Cdiv>\n  \u003Ca href=\"https:\u002F\u002Fwww.visactor.com#gh-light-mode-only\" target=\"_blank\">\n    \u003Cimg alt=\"VisActor Logo\" height=\"30\" src=\"https:\u002F\u002Flf-dp.bytetos.com\u002Fobj\u002Fdp-open-internet-cn\u002Fvisactor-site\u002Fbytedance\u002Fclient\u002Fimg\u002Fvisactor\u002Fnavigator-logo.svg\"\u002F>\n  \u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fwww.visactor.com#gh-dark-mode-only\" target=\"_blank\">\n    \u003Cimg alt=\"VisActor Logo\" height=\"30\" src=\"https:\u002F\u002Flf9-dp-fe-cms-tos.byteorg.com\u002Fobj\u002Fbit-cloud\u002Fvisactor\u002Flogo_500_200_dark.svg\"\u002F>\n  \u003C\u002Fa>\n\u003C\u002Fdiv>\n\nThanks to [VisActor](https:\u002F\u002Fwww.visactor.com\u002F) for providing the data visualization solution.\n\n## 👐 Contributing\n\nThanks to all the people who already contributed!\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FDouyinFE\u002Fsemi-design\u002Fgraphs\u002Fcontributors\">\n  \u003Cimg src=\"https:\u002F\u002Fcontrib.rocks\u002Fimage?repo=DouyinFE\u002Fsemi-design\" \u002F>\n\u003C\u002Fa>\n\nRead 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.\n\nSee [CONTRIBUTING](CONTRIBUTING-en-US.md) documentation.\n\n# 🎈 License\n\nSemi UI is [MIT Licensed](LICENSE)\n\n## Star History\n\n\u003Ca href=\"https:\u002F\u002Fwww.star-history.com\u002F?repos=DouyinFE%2Fsemi-design&type=date&legend=top-left\">\n \u003Cpicture>\n   \u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\"https:\u002F\u002Fapi.star-history.com\u002Fchart?repos=DouyinFE\u002Fsemi-design&type=date&theme=dark&legend=top-left\" \u002F>\n   \u003Csource media=\"(prefers-color-scheme: light)\" srcset=\"https:\u002F\u002Fapi.star-history.com\u002Fchart?repos=DouyinFE\u002Fsemi-design&type=date&legend=top-left\" \u002F>\n   \u003Cimg alt=\"Star History Chart\" src=\"https:\u002F\u002Fapi.star-history.com\u002Fchart?repos=DouyinFE\u002Fsemi-design&type=date&legend=top-left\" \u002F>\n \u003C\u002Fpicture>\n\u003C\u002Fa>\n","Semi-UI 是一个现代化、全面且灵活的设计系统和React UI库。它提供了超过80个高质量组件，支持3000+设计令牌，便于用户构建自己的设计体系。该项目具有官方设计到代码（D2C）转换功能，可以在几秒钟内将Figma草图转化为实际代码；同时支持代码到设计（C2D），根据不同的主题自动生成Figma UI套件，确保设计与代码的一致性。此外，Semi-UI完全支持无障碍访问标准，遵循W3C指南。适合需要快速构建美观React应用程序，并希望在设计与开发之间实现无缝协作的场景使用。","2026-06-11 03:36:59","high_star"]