explaingit

microsoft/fluentui

📈 Trending★ 20,004TypeScriptAudience · developerComplexity · 2/5ActiveLicenseSetup · easy

TLDR

Microsoft's open-source library of pre-built UI components for web apps, styled in the Fluent design language used across Microsoft 365 and Edge.

Mindmap

mindmap
  root((repo))
    What it does
      Pre-built UI components
      Fluent design system
      Accessibility built-in
      Framework-agnostic option
    Tech stack
      TypeScript
      React v9 and v8
      Web Components
    Use cases
      Enterprise web apps
      Microsoft 365 add-ins
      Consistent design systems
    Audience
      React developers
      Enterprise teams
      Microsoft ecosystem users

Things people build with this

USE CASE 1

Build enterprise web applications with Microsoft 365-consistent styling and accessibility out of the box.

USE CASE 2

Create add-ins and integrations for Microsoft Office products using pre-built, accessible components.

USE CASE 3

Migrate gradually from Fluent UI React v8 to v9 by mixing both versions in the same project.

USE CASE 4

Develop web apps with a framework-agnostic Web Components implementation compatible with any JavaScript framework.

Tech stack

TypeScriptReactWeb Componentsnpm

Getting it running

Difficulty · easy Time to first run · 5min
MIT license, use freely for any purpose, including commercial, as long as you include the copyright notice.

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
Show me how to set up Fluent UI React v9 in a new React project and render a button, dropdown, and dialog.
Prompt 2
How do I migrate from Fluent UI React v8 to v9 without rewriting my entire component library?
Prompt 3
Give me an example of building a Microsoft 365-style navigation menu and form using Fluent UI components.
Prompt 4
How do I use Fluent UI Web Components in a non-React framework like Vue or vanilla JavaScript?
Prompt 5
What accessibility features are built into Fluent UI components by default?
Open on GitHub → Explain another repo

Generated 2026-05-18 · Model: sonnet-4-6 · Verify against the repo before relying on details.