README

Fluent UI Web

 !GitHub contributors !GitHub top language 

 Fluent UI React is shipping its v9 final stable release. Visit the Fluent UI React v9 Release page on the wiki to learn more about the upcoming release schedule.

Fluent UI web represents a collection of utilities, React components, and Web Components for building web applications.

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

The following table will help you navigate the 3 projects and understand their differences.


|   | React Components (v9) | React (v8) | Web Components |
|---| ----- | --------------- | -------------- |
| Overview    | New, future-proof and forward looking | Mature | Web Component implementation of Fluent UI. |
| Used By     | Microsoft 365 | Office | Edge |
| Read Me     | README.md | README.md| README.md |
| Changelog | CHANGELOG.md | CHANGELOG.md | CHANGELOG.md |
| Repo        | packages/react-components | ./packages/react | ./packages/web-components |
| Quick Start | Quick Start | Quick Start | See README.md |
| Docs        | https://react.fluentui.dev/ | aka.ms/fluentui-react | aka.ms/fluentui-web-components |
| NPM         | @fluentui/react-components | @fluentui/react| @fluentui/web-components |
| Version     |  |  |  |
| Issues      | ![Fluent UI React Components GitHub Issues?label=issues&style=flat-square)](https://github.com/microsoft/fluentui/issues?q=is%3Aissue+is%3Aopen+label%3A%22Fluent+UI+react-components+%28v9%29%22) | ![Fluent UI React GitHub Issues?label=issues&style=flat-square)](https://github.com/microsoft/fluentui/issues?q=is%3Aissue+is%3Aopen+label%3A%22Fluent+UI+react+(v8)%22) |  |


 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.

 FluentUI Insights

Fluent UI Insights is a series that describes the design and decisions behind the Fluent UI design system.

|                                                                                                             EP01: Positioning                                                                                                             |                                                                                                           EP02: Styling                                                                                                           |                                                                                                           EP03: Griffel                                                                                                           |
| :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------