Fluent UI
Microsoft's React and web component design system.
Fluent UI is Microsoft's design system, the one behind Office, Teams and Outlook on the web. That provenance is the whole argument: these components are exercised daily by hundreds of millions of people, including a very large population using assistive technology.
At a glance
| Install | npm install @fluentui/react-components |
| Version | v9 is the current line, v8 is legacy |
| Styling | Griffel, a build-time CSS-in-JS engine |
| Accessibility | high-contrast modes, thorough keyboard and screen reader support |
| MCP server | not published, llms.txt available |
| License | MIT |
Install
npm install @fluentui/react-components
import { FluentProvider, webLightTheme, Button } from '@fluentui/react-components'
<FluentProvider theme={webLightTheme}>
<Button appearance="primary">Save changes</Button>
</FluentProvider>
Mind the version split
Fluent UI v8 and v9 are different libraries with different packages and different APIs. A great deal of the material you will find online, including AI-generated code, refers to v8. Check which one an example targets before trusting it, because the two do not mix cleanly.
Where it fits
This is the right choice for software that lives inside the Microsoft ecosystem: Teams apps, Office add-ins, internal tools at organisations standardised on Microsoft 365. Outside that context, its size and its unmistakable visual identity are hard to justify.
Choose it if
- You are building for Teams, Office or a Microsoft-centric enterprise.
- High-contrast mode and Windows accessibility behaviour matter to your users.
Look elsewhere if
- You want a neutral base. This looks like a Microsoft product and is meant to.
- You want a small bundle. It is not built for that.