Gathering detailed insights and metrics for @fluentui/react
Gathering detailed insights and metrics for @fluentui/react
Fluent UI web represents a collection of utilities, React components, and web components for building web applications.
Installations
npm install @fluentui/reactDeveloper Guide
BETA
Typescript
No
Module System
CommonJS, ESM
Node Version
20.19.0
NPM Version
10.8.2
Score
93.8
Supply Chain
94.6
Quality
95
Maintenance
100
Vulnerability
100
License
Releases
19,586
@fluentui/react-monaco-editor v1.7.346
@fluentui/react-monaco-editor_v1.7.346
Updated on Jul 02, 2025
@fluentui/react-docsite-components v8.13.228
@fluentui/react-docsite-components_v8.13.228
Updated on Jul 02, 2025
@fluentui/react-charting v5.24.10
@fluentui/react-charting_v5.24.10
Updated on Jul 02, 2025
@fluentui/chart-utilities v1.1.20
@fluentui/chart-utilities_v1.1.20
Updated on Jul 02, 2025
@fluentui/web-components v3.0.0-beta.111
@fluentui/web-components_v3.0.0-beta.111
Updated on Jul 01, 2025
@fluentui/chart-web-components v0.0.35
@fluentui/chart-web-components_v0.0.35
Updated on Jul 01, 2025
Languages
10
TypeScript
JavaScript
MDX
SCSS
HTML
CSS
Shell
EJS
Handlebars
Dockerfile
TypeScript (95.77%)
JavaScript (1.77%)
MDX (1.64%)
SCSS (0.48%)
HTML (0.19%)
CSS (0.14%)
Shell (0.01%)
EJS (0.01%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
NOASSERTION License
19,368 Stars
19,619 Commits
2,811 Forks
286 Watchers
105 Branches
908 Contributors
Updated on Jul 02, 2025
Bundle Size
0.98 MB
Minified
277.13 kB
Minified + Gzipped
Maintainers
11
Package Meta Information
Latest Version
8.123.0
Package Id
@fluentui/react@8.123.0
Unpacked Size
32.81 MB
Size
4.84 MB
File Count
7,448
NPM Version
10.8.2
Node Version
20.19.0
Published on
May 29, 2025
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
14
@fluentui/date-time-utilities@fluentui/foundation-legacy@fluentui/font-icons-mdl2@fluentui/merge-styles@fluentui/react-focus@fluentui/react-hooks@fluentui/react-portal-compat-context@fluentui/react-window-provider@fluentui/set-version@fluentui/style-utilities@fluentui/theme@fluentui/utilities@microsoft/load-themed-stylestslib
Peer Dependencies
4
Dev Dependencies
12
@fluentui/common-styles@fluentui/eslint-plugin@fluentui/example-data@fluentui/jest-serializer-merge-styles@fluentui/react-conformance@fluentui/test-utilities@fluentui/webpack-utilitiesoffice-ui-fabric-core@fluentui/scripts-api-extractor@fluentui/scripts-jest@fluentui/scripts-tasks@fluentui/scripts-webpack
Fluent UI React
The React-based front-end framework for building web experiences.
Fluent UI React (formerly Office UI Fabric React) is a collection of robust React-based components designed to make it simple for you to create consistent web experiences using the Fluent Design Language.
What's changed in version 8? See the release notes.
(If you're looking for Fluent UI Northstar, formerly Stardust, use @fluentui/react-northstar instead.)
Component documentation
See the main Fluent UI website for the list of available components, API and usage documentation, and styling information.
Who uses Fluent UI React?
+ 45 additional Microsoft sites and products
Contents
Using Fluent UI React
Creating a new app
To create a simple React app using Create React App, install Node.js, then run:
1npx create-react-app my-app --template @fluentui/cra-template 2cd my-app 3npm start
Integrating in an existing project
1npm i @fluentui/react
This will add the package as a dependency in your package.json file and download it under node_modules/@fluentui/react.
The library includes ES module entry points under the lib folder (use lib-amd if you need AMD, or lib-commonjs if you need commonjs).
Version policy
Fluent UI React adheres to semantic versioning. However, we only consider constructs directly importable at the package level or from files at the root (e.g. @fluentui/react/lib/Utilities or @fluentui/react/lib-amd/Styling) to be part of our API surface. Everything else is considered package-internal and may be subject to changes, moves, renames, etc.
Browser support
Fluent UI React supports all evergreen browsers, with IE 11 as the min-bar version of Internet Explorer*. See the browser support doc for more information.
*NOTE: Internet Explorer 11 has been sunset. Features and bug fixes after the sunset date may not be compatible with IE11.
Right-to-left support
All components can render in LTR or RTL, depending on the dir attribute set on the html element (dir="rtl" will flip the direction of everything). You can also use the setRTL API if you don't have control over the html element's rendering. Example:
1import { setRTL } from '@fluentui/react/lib/Utilities'; 2 3setRTL(true);
Server-side rendering
Fluent UI React components can be rendered in a server-side Node environment (or used in tests which run in an SSR-like environment), but it requires customizing how styles and SCSS files are loaded. See the server-side rendering documentation for examples of how to handle this.
Advanced usage
For info about advanced usage including module- vs. path-based imports, using an AMD bundler like RequireJS, and deployment features, see our advanced documentation.
Contribute to Fluent UI React
Please take a look at our contribution guidelines to learn how to make changes, build the repo and submit your contributions to Fluent UI.
Licenses
All files on the Fluent UI React GitHub repository are subject to the MIT license. Please read the License file at the root of the project.
Usage of the fonts and icons referenced in Fluent UI React is subject to the terms of the assets license agreement.
Changelog
We use GitHub Releases to manage our releases, including the changelog between every release. View a complete list of additions, fixes, and changes on the releases page.
More information
Please see the wiki.
This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.
No vulnerabilities found.
Reason
30 commit(s) out of 30 and 22 issue activity out of 30 found in the last 90 days -- score normalized to 10
Reason
no vulnerabilities detected
Reason
update tool detected
Details
- Info: Dependabot detected: .github/dependabot.yml:1
Reason
security policy file detected
Details
- Info: security policy detected in current repo: SECURITY.md:1
Reason
license file detected
Details
- Info: : LICENSE:1
Reason
no binaries found in the repo
Reason
GitHub code reviews found for 28 commits out of the last 30 -- score normalized to 9
Details
- Warn: no reviews found for commit: 958f4e2469b779d6e394fd6885ebd2532c7c229e
- Warn: no reviews found for commit: 0a2f1439168434c8ff1554e707961680a66ec97f
Reason
branch protection is not maximal on development and all release branches
Details
- Info: 'force pushes' disabled on branch 'master'
- Info: 'allow deletion' disabled on branch 'master'
- Info: status check found to merge onto on branch 'master'
- Warn: number of required reviewers is only 1 on branch 'master'
Reason
dependency not pinned by hash detected -- score normalized to 5
Details
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/actions-mention-to-teams.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/actions-mention-to-teams.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/check-packages.yml:9: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/check-packages.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/check-packages.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/check-packages.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/check-packages.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/check-packages.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/check-packages.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/check-packages.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/check-packages.yml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/check-packages.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/check-packages.yml:41: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/check-packages.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/docsite-publish.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/docsite-publish.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/docsite-publish.yml:32: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/docsite-publish.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/docsite-publish.yml:43: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/docsite-publish.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/docsite-publish.yml:47: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/docsite-publish.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr-housekeeping.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/pr-housekeeping.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/pr-housekeeping.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/pr-housekeeping.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-build.yml:71: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-build.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-build.yml:82: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-build.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-build.yml:92: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-build.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-build.yml:105: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-build.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-build.yml:116: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-build.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-build.yml:126: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-build.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-build.yml:137: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-build.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-build.yml:148: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-build.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-build.yml:158: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-build.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-build.yml:169: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-build.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-run.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-run.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/screener-run.yml:31: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/screener-run.yml:38: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/screener-run.yml:63: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-run.yml:80: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-run.yml:85: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/screener-run.yml:91: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/screener-run.yml:98: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/screener-run.yml:122: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-run.yml:139: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-run.yml:144: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/screener-run.yml:150: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/screener-run.yml:157: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/screener-run.yml:182: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
- Warn: containerImage not pinned by hash: .devcontainer/Dockerfile:5: pin your Docker image by updating mcr.microsoft.com/vscode/devcontainers/javascript-node to mcr.microsoft.com/vscode/devcontainers/javascript-node@sha256:28d382643a2f24b421c5ae65661cb8dec3f4735fdb7427be1634d20aa12466f4
- Info: no insecure (not pinned by hash) dependency downloads found in Dockerfiles
- Info: no insecure (not pinned by hash) dependency downloads found in shell scripts
Reason
no badge detected
Reason
dangerous workflow patterns detected
Details
- Warn: script injection with untrusted input ' github.event.pull_request.head.ref ': .github/workflows/screener-build.yml:44
- Warn: untrusted code checkout '${{github.event.workflow_run.head_branch}}': .github/workflows/screener-run.yml:80
- Warn: untrusted code checkout '${{github.event.workflow_run.head_branch}}': .github/workflows/screener-run.yml:139
- Warn: untrusted code checkout '${{github.event.workflow_run.head_branch}}': .github/workflows/screener-run.yml:20
Reason
non read-only tokens detected in GitHub workflows
Details
- Warn: no topLevel permission defined: .github/workflows/actions-mention-to-teams.yml:1: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/actions-mention-to-teams.yml/main?enable=permissions
- Warn: no topLevel permission defined: .github/workflows/check-packages.yml:1: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/check-packages.yml/main?enable=permissions
- Warn: no topLevel permission defined: .github/workflows/create-milestone.yml:1: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/create-milestone.yml/main?enable=permissions
- Warn: no topLevel permission defined: .github/workflows/docsite-publish.yml:1: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/docsite-publish.yml/main?enable=permissions
- Info: topLevel 'contents' permission set to 'read': .github/workflows/pr-housekeeping.yml:6: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/pr-housekeeping.yml/main?enable=permissions
- Warn: no topLevel permission defined: .github/workflows/screener-build.yml:1: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-build.yml/main?enable=permissions
- Warn: no topLevel permission defined: .github/workflows/screener-run.yml:1: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=permissions
Reason
project is not fuzzed
Score
6.4
/10
Last Scanned on 2022-08-15
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More