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.18.1
NPM Version
10.8.2
Score
94
Supply Chain
94.6
Quality
99.5
Maintenance
100
Vulnerability
100
License
Releases
18,175
@fluentui/react-monaco-editor v1.7.288
@fluentui/react-monaco-editor_v1.7.288
Published on 31 Jan 2025
@fluentui/react-docsite-components v8.13.170
@fluentui/react-docsite-components_v8.13.170
Published on 31 Jan 2025
@fluentui/react-charting v5.23.50
@fluentui/react-charting_v5.23.50
Published on 31 Jan 2025
@fluentui/react-monaco-editor v1.7.287
@fluentui/react-monaco-editor_v1.7.287
Published on 30 Jan 2025
@fluentui/react-docsite-components v8.13.169
@fluentui/react-docsite-components_v8.13.169
Published on 30 Jan 2025
@fluentui/react-charting v5.23.49
@fluentui/react-charting_v5.23.49
Published on 30 Jan 2025
Contributors
897
Languages
10
TypeScript
JavaScript
MDX
SCSS
HTML
CSS
Shell
EJS
Handlebars
Dockerfile
TypeScript (95.72%)
JavaScript (1.81%)
MDX (1.6%)
SCSS (0.51%)
HTML (0.2%)
CSS (0.15%)
Shell (0.01%)
EJS (0.01%)
Developer
Download Statistics
Total Downloads
25,694,271
Last Day
30,215
Last Week
147,413
Last Month
661,786
Last Year
9,163,240
GitHub Statistics
18,800 Stars
18,997 Commits
2,762 Forks
289 Watching
95 Branches
897 Contributors
Bundle Size
0.98 MB
Minified
277.06 kB
Minified + Gzipped
Maintainers
12
Package Meta Information
Latest Version
8.122.9
Package Id
@fluentui/react@8.122.9
Unpacked Size
32.78 MB
Size
4.84 MB
File Count
7,457
NPM Version
10.8.2
Node Version
20.18.1
Publised On
29 Jan 2025
Total Downloads
Cumulative downloads
Total Downloads
25,694,271
Last day
-8.9%
30,215
Compared to previous day
Last week
-15.2%
147,413
Compared to previous week
Last month
-3.1%
661,786
Compared to previous month
Last year
32.1%
9,163,240
Compared to previous year
Daily Downloads
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
Versions
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