The Fluent UI 9 React Problem in SharePoint Framework

When will we get Fluent UI 9 in SharePoint Framework? Why does SharePoint Framework still only support Fluent UI 8 and come with this version?

Let me explain.

Why SharePoint Framework still uses Fluent UI 8

SharePoint Framework sticks with Fluent UI 8 for practical reasons.

Think about it: if every web part bundled its own React and Fluent UI version, SharePoint pages would load multiple framework instances. This causes real problems: version conflicts, bloated page weight, and slower load times.

The core constraint is React itself. SharePoint uses React 17.0.1 across all customizable pages. Fluent UI 9 requires React 18+. That version gap is the blocker.

You can hack Fluent UI 9 in by bundling React 18. But you’d inherit all those problems, and at that point you’re just working against the platform.

This same constraint affects hTWOo, the Fluent Design implementation I co-created with Julie Turner. Our React version is also bound to React 17. We’re testing against newer versions, so we’re ready when SPFx finally moves up.

The two Fluent UI 9 React versions

At the moment, there are two versions of Fluent UI 9 for React available. Namely:

• fluentui/react-components – Fluent UI Web Version for React
• fluentui/web-components – Fluent UI Web Components

They share the “components” part of the naming. The first option is natively written in React, and the other offers web components. This distinction can affect the development process and the choice of tools and technologies.

While the React version serves only one Framework, React, the web component version supports Angular, ASP.net, Aurelia, Blazor, Ember, Vue, Webpack, and, of course, React.

The React Problem

Other frameworks, like React, found it easier to work with web components because they work directly with the browser’s HTML Document Object Model. This is due to the initial design choices Facebook made when creating React with the Virtual DOM.

Facebook initially wanted something quick and always up to date for their chat component, so they created React using the Virtual DOM.

The Virtual DOM (Virtual Document Object Model) is a lightweight, in-memory representation of the actual DOM elements in a web page. Whenever web standards change or new concepts are introduced, the Virtual DOM needs to be updated.

The initial support for web components was introduced in React 16 and improved in React 17 and 18. A special wrapper was often required to pass custom properties, states, and events to the web component.

With the promising release of React 19 (not out yet), web components can be seamlessly integrated without a wrapper component. This advancement ensures that the developer experience will be as smooth as working with native HTML elements, bringing a wave of optimism for the future of SharePoint Framework.

Microsoft Graph Toolkit

You can use Microsoft Graph Toolkit in React, but this wrapper has made it possible. So once React 19 is out, you can use it, for example, with a React web application. You can use the native experience.

An example wrapper looks like this:

class MyComponentWrapper extends React.Component {
  componentDidMount() {
    this.updateWebComponent();
  }

  componentDidUpdate() {
    this.updateWebComponent();
  }

  updateWebComponent() {
    const { someProperty } = this.props;
    this.webComponent.someProperty = someProperty;
  }

  render() {
    return (
      <my-web-component
        ref={(el) => (this.webComponent = el)}
        some-attribute={this.props.someAttribute}
      />
    );
  }
}

A similar wrapper helps React work with the Shadow DOM, ensuring that content passed into Web Component slots is handled properly.

So, when embedded in React, all the wrapper code the Graph Toolkit uses will become obsolete.

Fluent UI 9 is not supported

According to Microsoft’s Fluent UI website, the latest official version is Fluent UI 8.0. Only in the header will you see a banner mentioning a newer version: “Explore the next evolution of Microsoft’s design system.”

While we see Fluent UI 9 on the SharePoint user interface, it is unclear where this version is used or what I call “SharePoint UI”.

Since only some components we see on SharePoint are also part of Fluent UI, an additional layer of components is private.

The circumstances are clearer in Microsoft Teams because the new Teams Client uses Fluent UI 9 plus additional components. The Client itself is a React Native application.

Viva Connections, for example, renders at least on the mobile client as React Native Controls.

In the long run

Fluent UI 9 React is potentially the last version we see; it reached a dead end. I don’t know why Microsoft would support a dedicated version of React in the Future. It would cost money to develop and be an isolated solution anyway.

It’s important to note that Web Components are set to replace React versions in the near future. This transition will require updating the SharePoint Framework to the soon-to-be-released React 19, and it’s crucial to be prepared for these upcoming changes.
This transition necessitates updating the SharePoint Framework to the soon-to-be-released React 19. It’s hoped that Microsoft will skip React 18 in this process, which could streamline and improve the update.

The two Fluent UI React versions could be why the SharePoint Framework hasn’t put any effort into updating the Fluent UI 8 version yet. Neither should you.

From my experience, the components and designs we create to serve our customers needs use only a limited set of overall capabilities.

The problem is that Microsoft’s Fluent Design is open source, which does not mean they care about third-party developers. I suggest they only show how they solved issues in their products, which might benefit some developers.

While it might be a look into the future in a couple of months, it will be the logical evolution. Web Components are the future and maybe for SharePoint too.

Your options right now

As of SPFx 1.22, SharePoint Framework still ships with React 17.0.1 and Fluent UI 8. It will change only when there is broad support for React 18 in SharePoint.

So what can you actually use?

FAQ

When will SPFx support Fluent UI 9?
No official timeline. It depends on React 18 support in SharePoint, which hasn’t been announced.

Can I use Fluent UI Web Components without React?
Yes, but in SPFx you’re already in a React context, so you’ll likely hit the wrapper quirks mentioned above.

Personal opinion

Here’s the real question: by the time SharePoint supports React 18 or 19, will Fluent UI 9 still be current? We went from Office UI Fabric to Fluent UI to Fluent 2 in just a few years. Betting on a React-bound version feels risky.

Over the years, we worked with Office UI Fabric and Fluent UI across multiple versions, and faced issues with each. Since the show must go on, Julie Turner (Sympraxis) and I created hTWOo to deliver a more sustainable solution for customisations in Microsoft 365.

What started as a weekend project has served well in many projects over the last four years; thousands of people see it daily without even recognising that it is not the Microsoft Fluent UI but the Microsoft Fluent Design they are looking at.

hTWOo React gives you native React components built on an HTML/CSS foundation. Since that foundation is framework-agnostic, web components could be a natural future step.

It is open source but comes with professional paid support from Sympraxis or me.

If you want Julie Turner and me to help us evolve this project, you can even sponsor it individually.