explaingit

microsoft/fluentui

Analysis updated 2026-06-21

19,978TypeScriptAudience · developerComplexity · 2/5Setup · easy

TLDR

Microsoft's open source library of ready-made UI components for React and the web, buttons, inputs, dialogs, and more, styled to match Microsoft 365 apps like Word and Excel.

Mindmap

mindmap
  root((fluentui))
    What it does
      Ready-made UI components
      Microsoft design language
      Accessibility built in
    Tech Stack
      TypeScript
      React
      Web Components
      npm
    Versions
      Fluent UI React v9
      Fluent UI React v8
      Web Components
    Use Cases
      Enterprise web apps
      Microsoft 365 integrations
      Gradual v8 to v9 migration
    Audience
      React developers
      Enterprise teams
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Add polished, accessible buttons, dropdowns, and dialogs to a React app without designing them from scratch.

USE CASE 2

Build a web app that looks and feels consistent with Microsoft 365 for organisations already in that ecosystem.

USE CASE 3

Migrate from Fluent UI v8 to v9 component by component, running both versions side by side in the same project.

USE CASE 4

Use the framework-agnostic Web Components version to add Fluent UI elements to non-React apps including Edge extensions.

What is it built with?

TypeScriptReactWeb Componentsnpm

How does it compare?

microsoft/fluentuimonkeytypegame/monkeytypeweb3/web3.js
Stars19,97819,98519,936
LanguageTypeScriptTypeScriptTypeScript
Setup difficultyeasyhardeasy
Complexity2/53/53/5
Audiencedevelopervibe coderdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 30min

In plain English

Fluent UI Web is Microsoft's open source library of ready-made user interface components for building web applications. A UI component library is a collection of pre-built building blocks, buttons, dropdowns, input fields, dialogs, navigation menus, and so on, styled and coded to a consistent design language, so developers do not have to design and build each element from scratch. Fluent is Microsoft's design language, the same visual system used in Microsoft 365 products like Word and Excel and in the Edge browser. The repository contains three separate projects that can be used independently or combined. The first is Fluent UI React v9, the current, forward-looking version built with modern React, used internally by Microsoft 365. The second is Fluent UI React v8, the mature, widely deployed previous version, still supported and used by Office products. The third is Fluent UI Web Components, a framework-agnostic implementation based on the Web Components standard, used in Microsoft Edge. All three are written in TypeScript and published separately on npm. Developers building enterprise web applications on React would reach for Fluent UI when they want their product to look and feel consistent with Microsoft's ecosystem, when they need accessibility built in by default, or when they want to save time by not designing every UI element from scratch. Organizations already using Microsoft 365 or building add-ins and integrations for Microsoft products are the natural audience. You can mix v9 and v8 components in the same project to migrate gradually without a big-bang rewrite.

Copy-paste prompts

Prompt 1
Add Fluent UI React v9 Button, Input, and Dialog components to my React TypeScript app using npm and show me a complete working example.
Prompt 2
I have a React app using Fluent UI v8 and want to start migrating to v9 without rewriting everything. Show me how to install both versions and mix components from each in the same file.
Prompt 3
Create a responsive navigation sidebar using Fluent UI React v9 with collapsible menu items that matches the Microsoft 365 visual style.
Prompt 4
Show me how to apply a custom brand colour theme to a Fluent UI React v9 component tree while keeping the default accessibility contrast settings.

Frequently asked questions

What is fluentui?

Microsoft's open source library of ready-made UI components for React and the web, buttons, inputs, dialogs, and more, styled to match Microsoft 365 apps like Word and Excel.

What language is fluentui written in?

Mainly TypeScript. The stack also includes TypeScript, React, Web Components.

How hard is fluentui to set up?

Setup difficulty is rated easy, with roughly 30min to a first successful run.

Who is fluentui for?

Mainly developer.

Open on GitHub → Explain another repo

This repo across BitVibe Labs

Scan in gitsafehub Deploy in gitdeployhub microsoft on gitmyhub

Verify against the repo before relying on details.