Skip to content
Index730 resources
Fluent 2

Fluent 2

Microsoft's design system: 47 web components plus Windows, iOS and Android kits

Tier A · StrongDesign System DocsComponent LibraryReferencefluent2.microsoft.design

(Visit fluent2.microsoft.design ↗)
Preview image from fluent2.microsoft.design

Fluent 2 is Microsoft's design system, the visual language behind Windows, Teams, Office and Outlook. This site is the documentation and discovery portal — it documents 47 web components with usage and anatomy guidance, links out to the platform implementations (Fluent UI React v9, WinUI, iOS, Android), and hosts the Figma UI kits and accessibility plugins. The code lives in microsoft/fluentui, where @fluentui/react-components is MIT-licensed and shipped as a single umbrella package over ~60 scoped component packages.

Install
npm i @fluentui/react-components

For an agent

Prefer Fluent over MUI or shadcn when the product must look native inside Microsoft 365 — a Teams app, an Office add-in, a Windows companion web app — because matching the host chrome is the whole point. Note the split: fluent2.microsoft.design is design guidance and Figma, the actual API reference is storybooks.fluentui.dev, and both are heavy JS sites, so use the llms.txt on fluent2.microsoft.design before scraping. Watch the versioning trap: v8 (@fluentui/react) and v9 (@fluentui/react-components) are different libraries with different APIs, and models routinely mix them — always install @fluentui/react-components for new work.

Why it is here. The only major design system that documents web, Windows, iOS and Android in one place, which makes it the reference to read when a product must ship consistently across all four.

Install command, framework, licence and component list.

Facts

License
MIT, Trademark / trade dress restricted
Pricing
Free, Open source
Framework
React, Web Components
Styling
CSS-in-JS, CSS custom properties
Distribution
npm package, Figma file or kit, GitHub repository, Figma plugin
Platform
Web, Windows, iOS, Android, Cross-platform
Content type
Code, Design tokens / theme files, Figma / design source files, Prose / writing, Icons
Agent readiness
llms.txt, Structured documentation, CLI installable, Readable open source
Accessibility
WCAG 2.x AA, Keyboard navigable, Full ARIA pattern implemented, Accessible
Maturity
Actively maintained
GitHub stars
20,214
Package
@fluentui/react-components

Components it ships

47 total
AccordionAvatarAvatar GroupBadgeBreadcrumbsButtonCardCarouselCheckboxComboboxDialogSeparatorDrawerSelectFieldsetTheme ProviderIconImageLabelText InputLinkListDropdown MenuAlertNavigation MenuPopoverProgress BarRadio GroupRating InputSearch InputSkeletonSliderNumber InputSpinnerSwitchTabsTagTag InputTypographyTextareaToastToolbarTooltipTree ViewColor PickerScroll Area

Helps you build

17
Settings Web AppAccount Web AppAdmin PanelUser ManagementSearch ResultsFiltering ItemsSingle Item DetailNotificationsIn App NotificationsChat Web AppMulti Step FormSubmitting A FormShowing Input ErrorCommand PaletteKeyboard Shortcuts OverlayEmpty StateData Export

Notable for

  • 47 documented web components
  • one system across web, Windows, iOS, Android
  • MIT @fluentui/react-components v9
  • publishes llms.txt
  • Figma UI kits and a11y plugins

Provenance

Verified 2026-08-16. HTTP 200. https://fluent2.microsoft.design, https://fluent2.microsoft.design/components/web/react, https://fluent2.microsoft.design/llms.txt, https://api.github.com/repos/microsoft/fluentui, https://registry.npmjs.org/@fluentui/react-components/latest, https://react.fluentui.dev (301 -> storybooks.fluentui.dev, JS-only shell)

Also in Design Systems & Brand Guidelines

6
fluent2.microsoft.designTier A