# Fluent UI — Microsoft Design System for React

> Microsoft's open-source React component library implementing the Fluent Design System. Powers Microsoft 365, Teams, and Azure Portal interfaces.

## Install

Save as a script file and run:

# Fluent UI — Microsoft Design System for React

## Quick Use
```bash
npm install @fluentui/react-components
```
```tsx
import { FluentProvider, webLightTheme, Button } from "@fluentui/react-components";

function App() {
  return (
    <FluentProvider theme={webLightTheme}>
      <Button appearance="primary">Click me</Button>
    </FluentProvider>
  );
}
```

## Introduction
Fluent UI is Microsoft's official design system and React component library. It provides production-grade UI components used across Microsoft 365, Teams, and Azure Portal, giving developers access to the same polished components that power Microsoft's own products.

## What Fluent UI Does
- Provides 60+ accessible React components (buttons, dialogs, menus, data grids, etc.)
- Implements the Fluent Design System with depth, motion, and light principles
- Ships a robust theming engine for light, dark, and high-contrast modes
- Offers full keyboard navigation and screen reader support via ARIA patterns
- Includes both Fluent UI React v9 (current) and legacy v8 packages

## Architecture Overview
Fluent UI v9 uses a composable architecture built on Griffel for atomic CSS-in-JS. Each component exposes slots for fine-grained customization. The library ships as separate scoped packages under ``@fluentui/react-components``, enabling tree-shaking to reduce bundle size.

## Self-Hosting & Configuration
- Install the meta-package: ``npm install @fluentui/react-components``
- Wrap your app in ``FluentProvider`` and pass a theme object
- Customize tokens (colors, spacing, radii) through the theme API
- Use ``createDarkTheme()`` or ``createHighContrastTheme()`` for accessibility
- Icons are available separately via ``@fluentui/react-icons``

## Key Features
- Enterprise-grade accessibility (WCAG 2.1 AA) built into every component
- Composable slots system for overriding any part of a component
- CSS-in-JS with Griffel for near-zero runtime overhead
- Stable API backed by Microsoft with long-term support commitments
- Comprehensive Storybook documentation with live examples

## Comparison with Similar Tools
- **MUI (Material UI)** — implements Google Material Design; Fluent UI follows Microsoft Fluent guidelines
- **Ant Design** — popular in Chinese enterprise apps; Fluent UI targets Microsoft ecosystem
- **Chakra UI** — simpler API surface; Fluent UI offers deeper enterprise features
- **shadcn/ui** — copy-paste Tailwind components; Fluent UI is a full managed library
- **Radix UI** — headless primitives; Fluent UI ships fully styled out of the box

## FAQ
**Q: Is Fluent UI free for commercial use?**
A: Yes. Fluent UI is MIT-licensed and free for any project.

**Q: Can I use Fluent UI outside of Microsoft products?**
A: Absolutely. It is a general-purpose React library usable in any React application.

**Q: What is the difference between v8 and v9?**
A: v9 is a ground-up rewrite with composable architecture and Griffel CSS-in-JS. v8 uses a legacy styled-components approach and is in maintenance mode.

**Q: Does Fluent UI support server-side rendering?**
A: Yes. Griffel supports SSR and the library works with Next.js and other SSR frameworks.

## Sources
- https://github.com/microsoft/fluentui
- https://react.fluentui.dev/

---
Source: https://tokrepo.com/en/workflows/asset-a990035e
Author: Script Depot