[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3741":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":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":24,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":31,"readmeContent":32,"aiSummary":33,"trendingCount":16,"starSnapshotCount":16,"syncStatus":34,"lastSyncTime":35,"discoverSource":36},3741,"fluentui","microsoft\u002Ffluentui","microsoft","Fluent UI web represents a collection of utilities, React components, and web components for building web applications.","https:\u002F\u002Freact.fluentui.dev",null,"TypeScript",20046,2890,286,446,0,11,79,8,45,"Other",false,"master",true,[26,27,7,28,29,30],"components","fluent","office-ui-fabric","react","react-components","2026-06-12 02:00:53","# Fluent UI Web\n\n[![Build Status](https:\u002F\u002Fimg.shields.io\u002Fazure-devops\u002Fbuild\u002Fuifabric\u002Ffabricpublic\u002F164\u002Fmaster?style=flat-square)](https:\u002F\u002Fdev.azure.com\u002Fuifabric\u002Ffabricpublic\u002F_build?definitionId=164) ![GitHub contributors](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fcontributors\u002Fmicrosoft\u002Ffluentui?style=flat-square) ![GitHub top language](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flanguages\u002Ftop\u002Fmicrosoft\u002Ffluentui?style=flat-square) [![Twitter Follow](https:\u002F\u002Fimg.shields.io\u002Ftwitter\u002Ffollow\u002Ffluentui?logo=x&style=flat-square)](https:\u002F\u002Ftwitter.com\u002FFluentUI?ref_src=twsrc%5Etfw)\n\n> Fluent UI React is shipping its v9 final stable release. Visit the [Fluent UI React v9 Release page on the wiki](https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Ffluentui\u002Fwiki\u002FFluent-UI-React-v9-Release) to learn more about the upcoming release schedule.\n\nFluent UI web represents a collection of utilities, React components, and Web Components for building web applications.\n\nThis repo is home to 3 separate projects today. Combining Fluent UI React v9 components with Fluent UI React v8 or v0 components is possible and allows gradual migration to Fluent UI v9.\n\nThe following table will help you navigate the 3 projects and understand their differences.\n\n\u003C!-- prettier-ignore-start -->\n|   | React Components (v9) | React (v8) | Web Components |\n|---| ----- | --------------- | -------------- |\n| **Overview**    | New, future-proof and forward looking | Mature | Web Component implementation of Fluent UI. |\n| **Used By**     | Microsoft 365 | Office | Edge |\n| **Read Me**     | [README.md](\u002Fpackages\u002Freact-components\u002Freact-components\u002FREADME.md) | [README.md](\u002Fpackages\u002Freact\u002FREADME.md)| [README.md](\u002Fpackages\u002Fweb-components\u002FREADME.md) |\n| **Changelog** | [CHANGELOG.md](\u002Fpackages\u002Freact-components\u002Freact-components\u002FCHANGELOG.md) | [CHANGELOG.md](\u002Fpackages\u002Freact\u002FCHANGELOG.md) | [CHANGELOG.md](\u002Fpackages\u002Fweb-components\u002FCHANGELOG.md) |\n| **Repo**        | [packages\u002Freact-components](\u002Fpackages\u002Freact-components\u002Freact-components) | [.\u002Fpackages\u002Freact](\u002Fpackages\u002Freact) | [.\u002Fpackages\u002Fweb-components](\u002Fpackages\u002Fweb-components) |\n| **Quick Start** | [Quick Start](https:\u002F\u002Freact.fluentui.dev\u002F?path=\u002Fdocs\u002Fconcepts-developer-quick-start--docs) | [Quick Start](https:\u002F\u002Fdeveloper.microsoft.com\u002Fen-us\u002Ffluentui#\u002Fget-started\u002Fweb) | [See README.md](https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Ffluentui\u002Ftree\u002Fmaster\u002Fpackages\u002Fweb-components\u002FREADME.md) |\n| **Docs**        | [https:\u002F\u002Freact.fluentui.dev\u002F](https:\u002F\u002Freact.fluentui.dev\u002F) | [aka.ms\u002Ffluentui-react](https:\u002F\u002Faka.ms\u002Ffluentui-react) | [aka.ms\u002Ffluentui-web-components](https:\u002F\u002Faka.ms\u002Ffluentui-web-components) |\n| **NPM**         | `@fluentui\u002Freact-components` | `@fluentui\u002Freact`| `@fluentui\u002Fweb-components` |\n| **Version**     | [![npm version](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@fluentui\u002Freact-components?style=flat-square)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@fluentui\u002Freact-components) | [![npm version](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@fluentui\u002Freact?style=flat-square)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@fluentui\u002Freact) | [![npm version](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@fluentui\u002Fweb-components\u002Fbeta?style=flat-square)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@fluentui\u002Fweb-components\u002Fv\u002F3.0.0-beta.15) |\n| **Issues**      | [![Fluent UI React Components GitHub Issues](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fissues\u002Fmicrosoft\u002Ffluentui\u002FFluent%20UI%20react-components%20(v9)?label=issues&style=flat-square)](https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Ffluentui\u002Fissues?q=is%3Aissue+is%3Aopen+label%3A%22Fluent+UI+react-components+%28v9%29%22) | [![Fluent UI React GitHub Issues](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fissues\u002Fmicrosoft\u002Ffluentui\u002FFluent%20UI%20react%20(v8)?label=issues&style=flat-square)](https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Ffluentui\u002Fissues?q=is%3Aissue+is%3Aopen+label%3A%22Fluent+UI+react+(v8)%22) | [![Fluent UI Web Components GitHub Issues](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fissues\u002Fmicrosoft\u002Ffluentui\u002Fweb-components?label=issues&style=flat-square)](https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Ffluentui\u002Fissues?q=is%3Aissue+is%3Aopen+label%3A%22web-components%22) |\n\u003C!-- prettier-ignore-end -->\n\n> Why are there two React versions? Fluent UI v8 is still widely used. We encourage you to migrate to Fluent UI v9. See the [Migration overview](https:\u002F\u002Freact.fluentui.dev\u002F?path=\u002Fdocs\u002Fconcepts-migration-from-v8-component-mapping--docs).\n\n## FluentUI Insights\n\n[Fluent UI Insights](https:\u002F\u002Fdocs.microsoft.com\u002Fen-us\u002Fshows\u002Ffluent-ui-insights?utm_source=github) is a series that describes the design and decisions behind the Fluent UI design system.\n\n|                                                                                                             EP01: Positioning                                                                                                             |                                                                                                           EP02: Styling                                                                                                           |                                                                                                           EP03: Griffel                                                                                                           |\n| :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |\n| \u003Ca href=\"https:\u002F\u002Flearn.microsoft.com\u002Fen-us\u002Fshows\u002Ffluent-ui-insights\u002Ffluent-ui-insights-positioning?utm_source=github\" target=\"_blank\">\u003Cimg src=\"ghdocs\u002Fmedias\u002Ffluentui-ep01-preview.gif\" alt=\"Watch EP01: Positioning\" width=\"240\" \u002F>\u003C\u002Fa> | \u003Ca href=\"https:\u002F\u002Flearn.microsoft.com\u002Fen-us\u002Fshows\u002Ffluent-ui-insights\u002Ffluent-ui-insights-styling?utm_source=github\" target=\"_blank\">\u003Cimg src=\"ghdocs\u002Fmedias\u002Ffluentui-ep02-preview.gif\" alt=\"Watch EP02: Styling\" width=\"240\" \u002F>\u003C\u002Fa> | \u003Ca href=\"https:\u002F\u002Flearn.microsoft.com\u002Fen-us\u002Fshows\u002Ffluent-ui-insights\u002Ffluent-ui-insights-griffel?utm_source=github\" target=\"_blank\">\u003Cimg src=\"ghdocs\u002Fmedias\u002Ffluentui-ep03-preview.gif\" alt=\"Watch EP03: Griffel\" width=\"240\" \u002F>\u003C\u002Fa> |\n\n|                                                                                                                          EP04: Foundational APIs                                                                                                                           |                                                                                                              EP05: Theming                                                                                                              |                                                                                                                  EP06: Accessible by default                                                                                                                  |\n| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |\n| \u003Ca href=\"https:\u002F\u002Flearn.microsoft.com\u002Fen-us\u002Fshows\u002Ffluent-ui-insights\u002Ffluent-ui-insights-apis-in-v9-slots-jsx-children-triggers?utm_source=github\" target=\"_blank\">\u003Cimg src=\"ghdocs\u002Fmedias\u002Ffluentui-ep04-preview.gif\" alt=\"Watch EP04: Foundational APIs\" width=\"240\" \u002F>\u003C\u002Fa> | \u003Ca href=\"https:\u002F\u002Flearn.microsoft.com\u002Fen-us\u002Fshows\u002Ffluent-ui-insights\u002Ffluent-ui-insights-theming-in-v9?utm_source=github\" target=\"_blank\">\u003Cimg src=\"ghdocs\u002Fmedias\u002Ffluentui-ep05-preview.gif\" alt=\"Watch EP05: Theming\" width=\"240\" \u002F>\u003C\u002Fa> | \u003Ca href=\"https:\u002F\u002Flearn.microsoft.com\u002Fen-us\u002Fshows\u002Ffluent-ui-insights\u002Ffluent-ui-insights-accessible-by-default?utm_source=github\" target=\"_blank\">\u003Cimg src=\"ghdocs\u002Fmedias\u002Ffluentui-ep06-preview.gif\" alt=\"Watch EP06: Accessible by default\" width=\"240\" \u002F>\u003C\u002Fa> |\n\n## Licenses\n\nAll files on the Fluent UI React GitHub repository are subject to the MIT license. Please read the License file at the root of the project.\n\nUsage of the fonts and icons referenced in Fluent UI React is subject to the terms of the [assets license agreement](https:\u002F\u002Faka.ms\u002Ffluentui-assets-license).\n\n## Changelog\n\nYou can view the complete list of additions, fixes, and changes in the CHANGELOG.md file for each package.\n\n## Looking for Office UI Fabric React?\n\nThe **Office UI Fabric React** project has evolved to **Fluent UI**.\n\nThe `office-ui-fabric-react` repo is now this repo (`fluentui` in the Microsoft organization)! The name change should not disrupt any current Fabric usage, repo clones, pull requests, or issue reporting. Links should redirect to the new location. The library formerly known as `office-ui-fabric-react` is now available as `@fluentui\u002Freact` (see above table for more information).\n\nWe have a lot in store for Fluent UI - [Read our announcement here.](https:\u002F\u002Fdeveloper.microsoft.com\u002Fen-us\u002Foffice\u002Fblogs\u002Fui-fabric-is-evolving-into-fluent-ui\u002F)\n\n## Looking for Fluent UI React Northstar?\n\nFluent UI React Northstar has been superseded by Fluent UI React Components v9 and reached End Of Life in July 2025.\n\nFor more details about Fluent UI React Northstar, see its [source](https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Ffluentui\u002Ftree\u002Freact-v0\u002Fpackages\u002Ffluentui) and [README.md](https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Ffluentui\u002Ftree\u002Freact-v0\u002Fpackages\u002Ffluentui\u002FREADME.md).\n\n---\n\nThis project has adopted the [Microsoft Open Source Code of Conduct](https:\u002F\u002Fopensource.microsoft.com\u002Fcodeofconduct\u002F). For more information see the [Code of Conduct FAQ](https:\u002F\u002Fopensource.microsoft.com\u002Fcodeofconduct\u002Ffaq\u002F) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.\n","Fluent UI Web 是一套用于构建网页应用的工具集、React 组件及Web组件。它支持三种主要版本：v9 React 组件面向未来，设计现代化；v8 React 组件成熟稳定；Web Components 实现了跨框架的兼容性。该项目采用TypeScript编写，提供了丰富的UI组件和样式，适用于需要创建一致且美观用户界面的企业级Web应用程序开发场景，特别适合那些希望遵循微软设计语言（如Office 365风格）的应用。通过提供详细的文档和示例，Fluent UI帮助开发者轻松上手并集成到现有项目中，无论是新项目还是迁移现有应用至最新版本。",2,"2026-06-11 02:55:55","top_language"]