Fluent UI React v9: What microsoft/fluentui Actually Ships
Fluent UI web represents a collection of utilities, React components, and web components for building web applications.
At a glance
- What is it?
- The microsoft/fluentui monorepo holds three separate projects: Fluent UI React v9, the older v8 line, and a Web Components implementation. This is a look at how v9 is packaged, how Griffel and the design tokens fit together, and where the project stops being the right choice.
- Who is it for?
- Adopt Fluent UI React v9 if you are building a Microsoft 365 style product in React and TypeScript and can accept Griffel's runtime styling model. Do not adopt it if you need a framework-agnostic component set, if your app is not React, or if you want a stable Web Components release, since that line is still published as a beta.
- Can I use it commercially?
- Check first. The repository uses a licence we do not classify automatically, so read its LICENSE file before any commercial use.
- Is it still maintained?
- Yes. The repository received new commits within the last day.
- What is it written in?
- Mainly TypeScript, according to GitHub's language statistics.
Answers come from the project's GitHub data, last synced on September 30, 2026, and from our analysis. They are not legal advice.
Editorial analysis
Three projects in one repository, and which one you are choosing
The README states plainly that this repo is home to three separate projects. Fluent UI React v9 is described as the new line, used by Microsoft 365. Fluent UI React v8 is described as mature and used by Office. Web Components is the Edge implementation. They are published under different npm names: @fluentui/react-components for v9, @fluentui/react for v8, and @fluentui/web-components for the Web Components line.
The versions do not share a release cadence. Recent releases in the repository include @fluentui/react-utilities v9.26.4 and @fluentui/react-tree v9.16.1, both dated 2026-05-26, while @fluentui/react-virtualizer is still published as v9.0.0-alpha.113. So even inside the v9 family, some packages are stable and some are alpha. Checking the version of the individual package you plan to import matters more than checking the version of the umbrella package.
If you are starting fresh, v9 is the line the README points you toward. Mixing v9 with v8 or v0 components is documented as possible, which is what makes gradual migration practical rather than an all-or-nothing rewrite.
How Griffel and design tokens shape the styling model
The repository ships a Fluent UI Insights video series, and the README lists Griffel as the subject of episode three, with styling as episode two. That ordering is a fair summary of how v9 is put together: components are styled through Griffel rather than through a stylesheet you import separately, and theming runs on design tokens rather than on a theme object you pass down.
The practical consequence is that a v9 component does not arrive with a class name you can override in your own CSS with confidence. You style it through the APIs the component exposes, and the generated class names are not part of the public contract. Teams coming from v8, where styling was handled differently, should expect the migration to touch style code as well as component imports. The README links a migration overview and a component mapping page on react.fluentui.dev for exactly this reason.
The monorepo layout reflects the split. The v9 work lives under packages/react-components, v8 under packages/react, and Web Components under packages/web-components, each with its own README and CHANGELOG. There is no single changelog that covers all three.
Installing Fluent UI React v9 and rendering a first component
The README does not print an install command inline. It points to the Quick Start page at react.fluentui.dev under the concepts and developer quick start path, and the npm package name in the table is @fluentui/react-components. That package name is the one the README gives for v9, and the Quick Start page is where the current install instructions live.
The repository also exposes a start script for working inside the monorepo itself, which is a different task from consuming the published package. The root package.json defines it as:
"start": "node -r ./scripts/ts-node/src/register ./scripts/executors/src/start"The same file defines the component scaffolding generators used when adding a new component to the repository rather than importing one:
"create-component": "nx g @fluentui/workspace-plugin:react-component",
"create-package": "nx g @fluentui/workspace-plugin:react-library"Those two commands only make sense inside a clone of the monorepo with its workspace tooling installed. They are not part of the consumer path. For an application, the README table gives the package name @fluentui/react-components and the docs site react.fluentui.dev, which is where component examples and the provider setup are documented. The README does not reproduce those examples, so read them there rather than copying a snippet from anywhere else.
If your project is on v8, the equivalent package is @fluentui/react, and the two can coexist during a migration. That is stated in the README, not inferred.
Where Fluent UI React v9 is the wrong tool
The most concrete limitation is scope. Everything in this repository targets web applications. The README's three projects are React components, React components of an older generation, and Web Components. If you are building a native mobile app or a desktop shell in another language, nothing here applies, and the search results that pair Fluent UI with Blazor or with Power Apps are pointing at a different surface than the one this repository describes.
The second limitation is the Web Components line. The README's own table links the npm badge for @fluentui/web-components to a specific beta version, 3.0.0-beta.15. That is the project's own signal that the framework-agnostic path is not the finished one. If your reason for choosing Fluent UI is that you want components outside React, you are choosing the least settled of the three projects in the repo.
The third is the alpha packages. @fluentui/react-virtualizer at v9.0.0-alpha.113 is an example: a real package, published, but labelled alpha in its own version string. Depending on it means accepting that its API can move. The README does not document a stability guarantee for alpha packages, and it does not document rollback procedures for version upgrades either.
Fluent UI React v9 against Material UI and Bootstrap
Material UI is the comparison people search for most, and the difference is not cosmetic. Material UI implements Google's Material Design as a general-purpose React component library. Fluent UI React v9 implements Microsoft's Fluent design language, and the README ties it directly to Microsoft 365 as the consuming product. If your product sits next to Microsoft 365, Teams, or Outlook, matching that visual language is the reason to pick v9. If it does not, you are adopting Microsoft's design decisions without the context that justifies them.
Bootstrap differs at a more basic level. It is a CSS framework with optional JavaScript, not a React component library, so the integration work is different in kind: you are composing class names and markup rather than rendering typed components. Fluent UI React v9 gives you TypeScript types on every component prop, which is a real advantage in a large codebase and a real cost if your team is not on TypeScript.
MudBlazor is a Blazor component library. It shares a name pattern with Fluent UI and appears in the same search results, but it targets .NET rather than React, so the two are alternatives only in the sense that both are UI kits. For a React project, it is not a substitute.
Repository health, licensing and upgrade cost
The repository is not archived, and its last push was on 2026-09-18. That is recent enough that the project is being worked on, and the pipeline files in the repository root support that reading: there are separate Azure Pipelines definitions for release, release-vnext, release-vnext-nightly, release-vnext-experimental, release.headless, release.tools, release.tools-experimental, release.web-components, and release-headless-experimental. Nine release pipelines is a lot of surface area, and it tells you the three projects ship independently rather than together.
Versioning runs through beachball, visible in the root package.json as the change and check:change scripts, with a change/ directory at the top level. Contributors add change files rather than editing versions by hand. From a consumer's side that means version bumps arrive per package, so a single upgrade can move @fluentui/react-components without moving the packages it depends on in lockstep. Read the CHANGELOG for the specific package you import.
The licence is listed as NOASSERTION, which means GitHub could not map the LICENSE file to a recognised SPDX identifier. The repository has a LICENSE file and a SECURITY.md. If licence terms matter to your organisation, read the LICENSE file itself rather than relying on the identifier, and route the question to whoever handles licensing on your side.
The engine constraint in the root package.json is node ^22.0.0 || ^24.0.0. That applies to building the repository, not to consuming the published packages, but it is a useful signal about the Node versions the project tests against.
Editorial conclusion
Adopt Fluent UI React v9 if you are building a Microsoft 365 style product in React and TypeScript and can accept Griffel's runtime styling model. Do not adopt it if you need a framework-agnostic component set, if your app is not React, or if you want a stable Web Components release, since that line is still published as a beta. Before committing, check the v9 quick start page at react.fluentui.dev for the current install command, and confirm whether the component you need exists in v9 rather than only in v8, because the two lines are separate packages with a documented migration path rather than a drop-in upgrade.
Frequently asked questions
Is Fluent UI free to use?
The repository ships a LICENSE file and a SECURITY.md, and GitHub reports the licence as NOASSERTION, meaning it could not be matched to a recognised SPDX identifier. The README does not state pricing, so read the LICENSE file directly if the terms matter to you.
What is Fluent UI React?
It is one of three projects in the microsoft/fluentui repository, described in the README as a collection of utilities and React components for building web applications. The v9 line is published as @fluentui/react-components and is used by Microsoft 365.
How do I install Fluent UI React?
The README table gives the npm package name @fluentui/react-components for v9 and links the Quick Start page at react.fluentui.dev under the concepts and developer quick start path. The README does not print the install command itself, so confirm it there.
What are the key differences between Material UI and Fluent UI?
Material UI implements Google's Material Design as a general-purpose React library, while Fluent UI React v9 implements Microsoft's Fluent design language and is tied in the README to Microsoft 365 as its consuming product. The choice usually comes down to whether your product sits alongside Microsoft's own interfaces.
Official sources
Add this badge to your README
If you maintain this project, the badge below links readers to this analysis and shows its maintenance status from the daily GitHub snapshot. Paste the markdown into your README; add ?metric=license or ?metric=stars to the image URL for a different field.
[](https://hysenlabs.com/projects/microsoft-fluentui)