# @fluentui/react-components

> Suite package for converged React components

Latest version **9.74.9** (published 2026-09-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install @fluentui/react-components
pnpm add @fluentui/react-components
yarn add @fluentui/react-components
bun add @fluentui/react-components
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; popular repo.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 9.74.9 |
| Published | 2026-09-23 |
| First published | 2021-02-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 62 |
| Unpacked size | 2.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 20294 |
| Maintainers | uifabricteam, uifrnbot, microsoft1es, microsoft-oss-releases |

## Links

- npm: https://www.npmjs.com/package/@fluentui/react-components
- Repository: https://github.com/microsoft/fluentui
- Homepage: https://github.com/microsoft/fluentui#readme
- Issues: https://github.com/microsoft/fluentui/issues
- npm.io page: https://npm.io/package/@fluentui/react-components

## Dependencies (62)

- [@swc/helpers](https://npm.io/package/@swc/helpers.md) ^0.5.1
- [@griffel/react](https://npm.io/package/@griffel/react.md) ^1.5.32
- [@fluentui/react-nav](https://npm.io/package/@fluentui/react-nav.md) ^9.4.7
- [@fluentui/react-aria](https://npm.io/package/@fluentui/react-aria.md) ^9.17.15
- [@fluentui/react-card](https://npm.io/package/@fluentui/react-card.md) ^9.7.3
- [@fluentui/react-link](https://npm.io/package/@fluentui/react-link.md) ^9.8.5
- [@fluentui/react-list](https://npm.io/package/@fluentui/react-list.md) ^9.6.19
- [@fluentui/react-menu](https://npm.io/package/@fluentui/react-menu.md) ^9.25.6
- [@fluentui/react-tabs](https://npm.io/package/@fluentui/react-tabs.md) ^9.12.5
- [@fluentui/react-tags](https://npm.io/package/@fluentui/react-tags.md) ^9.9.7
- [@fluentui/react-text](https://npm.io/package/@fluentui/react-text.md) ^9.6.20
- [@fluentui/react-tree](https://npm.io/package/@fluentui/react-tree.md) ^9.16.8
- [@fluentui/react-alert](https://npm.io/package/@fluentui/react-alert.md) 9.0.2-beta.1
- [@fluentui/react-badge](https://npm.io/package/@fluentui/react-badge.md) ^9.5.6
- [@fluentui/react-field](https://npm.io/package/@fluentui/react-field.md) ^9.5.5
- [@fluentui/react-image](https://npm.io/package/@fluentui/react-image.md) ^9.4.5
- [@fluentui/react-input](https://npm.io/package/@fluentui/react-input.md) ^9.8.7
- [@fluentui/react-label](https://npm.io/package/@fluentui/react-label.md) ^9.4.5
- [@fluentui/react-radio](https://npm.io/package/@fluentui/react-radio.md) ^9.6.6
- [@fluentui/react-table](https://npm.io/package/@fluentui/react-table.md) ^9.19.22
- [@fluentui/react-theme](https://npm.io/package/@fluentui/react-theme.md) ^9.2.2
- [@fluentui/react-toast](https://npm.io/package/@fluentui/react-toast.md) ^9.8.4
- [@fluentui/react-avatar](https://npm.io/package/@fluentui/react-avatar.md) ^9.11.8
- [@fluentui/react-button](https://npm.io/package/@fluentui/react-button.md) ^9.11.1
- [@fluentui/react-dialog](https://npm.io/package/@fluentui/react-dialog.md) ^9.18.5
- [@fluentui/react-drawer](https://npm.io/package/@fluentui/react-drawer.md) ^9.13.4
- [@fluentui/react-motion](https://npm.io/package/@fluentui/react-motion.md) ^9.16.4
- [@fluentui/react-portal](https://npm.io/package/@fluentui/react-portal.md) ^9.8.16
- [@fluentui/react-rating](https://npm.io/package/@fluentui/react-rating.md) ^9.4.6
- [@fluentui/react-search](https://npm.io/package/@fluentui/react-search.md) ^9.4.7
- [@fluentui/react-select](https://npm.io/package/@fluentui/react-select.md) ^9.5.6
- [@fluentui/react-slider](https://npm.io/package/@fluentui/react-slider.md) ^9.6.6
- [@fluentui/react-switch](https://npm.io/package/@fluentui/react-switch.md) ^9.7.6
- [@fluentui/react-divider](https://npm.io/package/@fluentui/react-divider.md) ^9.7.5
- [@fluentui/react-persona](https://npm.io/package/@fluentui/react-persona.md) ^9.7.10
- [@fluentui/react-popover](https://npm.io/package/@fluentui/react-popover.md) ^9.14.9
- [@fluentui/react-spinner](https://npm.io/package/@fluentui/react-spinner.md) ^9.8.6
- [@fluentui/react-tabster](https://npm.io/package/@fluentui/react-tabster.md) ^9.26.18
- [@fluentui/react-toolbar](https://npm.io/package/@fluentui/react-toolbar.md) ^9.8.5
- [@fluentui/react-tooltip](https://npm.io/package/@fluentui/react-tooltip.md) ^9.10.7
- [@fluentui/react-carousel](https://npm.io/package/@fluentui/react-carousel.md) ^9.9.14
- [@fluentui/react-checkbox](https://npm.io/package/@fluentui/react-checkbox.md) ^9.6.5
- [@fluentui/react-combobox](https://npm.io/package/@fluentui/react-combobox.md) ^9.17.7
- [@fluentui/react-overflow](https://npm.io/package/@fluentui/react-overflow.md) ^9.9.4
- [@fluentui/react-progress](https://npm.io/package/@fluentui/react-progress.md) ^9.5.6
- [@fluentui/react-provider](https://npm.io/package/@fluentui/react-provider.md) ^9.22.21
- [@fluentui/react-skeleton](https://npm.io/package/@fluentui/react-skeleton.md) ^9.7.6
- [@fluentui/react-textarea](https://npm.io/package/@fluentui/react-textarea.md) ^9.7.7
- [@fluentui/react-accordion](https://npm.io/package/@fluentui/react-accordion.md) ^9.12.4
- [@fluentui/react-infolabel](https://npm.io/package/@fluentui/react-infolabel.md) ^9.4.27
- [@fluentui/react-utilities](https://npm.io/package/@fluentui/react-utilities.md) ^9.26.7
- [@fluentui/react-breadcrumb](https://npm.io/package/@fluentui/react-breadcrumb.md) ^9.4.6
- [@fluentui/react-infobutton](https://npm.io/package/@fluentui/react-infobutton.md) 9.0.1-beta.1
- [@fluentui/react-spinbutton](https://npm.io/package/@fluentui/react-spinbutton.md) ^9.6.7
- [@fluentui/react-tag-picker](https://npm.io/package/@fluentui/react-tag-picker.md) ^9.10.5
- [@fluentui/react-message-bar](https://npm.io/package/@fluentui/react-message-bar.md) ^9.7.7
- [@fluentui/react-positioning](https://npm.io/package/@fluentui/react-positioning.md) ^9.23.3
- [@fluentui/react-virtualizer](https://npm.io/package/@fluentui/react-virtualizer.md) 9.0.0-alpha.116
- [@fluentui/react-color-picker](https://npm.io/package/@fluentui/react-color-picker.md) ^9.3.1
- [@fluentui/react-swatch-picker](https://npm.io/package/@fluentui/react-swatch-picker.md) ^9.6.2
- [@fluentui/react-shared-contexts](https://npm.io/package/@fluentui/react-shared-contexts.md) ^9.26.4
- [@fluentui/react-teaching-popover](https://npm.io/package/@fluentui/react-teaching-popover.md) ^9.7.7

## Recent versions

- 9.74.9 (latest) — 2026-09-23
- 0.0.0-nightly-20261002-0407.1 (nightly) — 2026-10-02
- 9.74.5-experimental.tabster-v9.20260804-bb909442fe.0 (experimental) — 2026-08-04
- 9.0.0-rc.15 (rc) — 2022-06-21
- 9.0.0-beta.5 (beta) — 2021-11-25
- 9.0.0-alpha.124 (alpha) — 2021-10-05
- 0.0.0-nightly-20260929-0404.1 — 2026-09-29
- 0.0.0-nightly-20260928-0404.1 — 2026-09-28
- 0.0.0-nightly-20260925-0403.1 — 2026-09-25
- 0.0.0-nightly-20260924-0403.1 — 2026-09-24
- 0.0.0-nightly-20260923-0404.1 — 2026-09-23
- 0.0.0-nightly-20260922-0403.1 — 2026-09-22
- 9.74.8 — 2026-09-21
- 0.0.0-nightly-20260917-0408.1 — 2026-09-17
- 0.0.0-nightly-20260916-0409.1 — 2026-09-16
- … 1551 more at https://npm.io/package/@fluentui/react-components/versions

## README

# @fluentui/react-components

**Converged Fluent UI React components**

This is a suite package for converged components and related utilities. It is a result of a dedupe effort for `@fluentui/react` and `@fluentui/react-northstar`.

### Usage

Add @fluentui/react-components to a project:

```sh
yarn add @fluentui/react-components
```

To use a component, add a `FluentProvider` with a theme close to the root of your application and then instantiate components inside the provider's subtree:

```js
import React from 'react';
import ReactDOMClient from 'react-dom/client';
import { FluentProvider, teamsLightTheme, Button } from '@fluentui/react-components';

ReactDOMClient.createRoot(document.getElementById('root')).render(
  <FluentProvider theme={teamsLightTheme}>
    <Button appearance="primary">I am a button.</Button>
  </FluentProvider>,
);
```

### Docs

Docs are hosted at https://react.fluentui.dev/.

---
_Source: https://npm.io/package/@fluentui/react-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._