Fluent UI web represents a collection of utilities, React components, and web components for building web applications.
Installations
npm install @fluentui/style-utilitiesReleases
@fluentui/theme-samples v8.7.188
Published on 22 Nov 2024
@fluentui/react v8.121.13
Published on 22 Nov 2024
@fluentui/react-monaco-editor v1.7.255
Published on 22 Nov 2024
@fluentui/react-file-type-icons v8.12.5
Published on 22 Nov 2024
@fluentui/react-experiments v8.14.185
Published on 22 Nov 2024
@fluentui/react-docsite-components v8.13.137
Published on 22 Nov 2024
Developer
Developer Guide
Module System
CommonJS, ESM
Min. Node Version
Typescript Support
No
Node Version
20.17.0
NPM Version
10.8.2
Statistics
18,581 Stars
18,755 Commits
2,745 Forks
285 Watching
108 Branches
886 Contributors
Updated on 27 Nov 2024
Languages
TypeScript (95.79%)
JavaScript (1.78%)
MDX (1.6%)
SCSS (0.52%)
HTML (0.18%)
CSS (0.11%)
Shell (0.01%)
EJS (0.01%)
Total Downloads
Cumulative downloads
Total Downloads
18,213,519
Last day
6.1%
26,738
Compared to previous day
Last week
1.9%
143,380
Compared to previous week
Last month
5.8%
598,082
Compared to previous month
Last year
17.8%
6,731,507
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Fluent UI Web
Fluent UI React is shipping its v9 final stable release. Visit the Fluent UI React v9 Release page on the wiki to learn more about the upcoming release schedule.
Fluent UI web represents a collection of utilities, React components, and Web Components for building web applications.
This repo is home to 3 separate projects today. Combining Fluent UI React v9 components with Fluent UI React v8 or v0 components is possible and allows gradual migration to Fluent UI v9.
The following table will help you navigate the 3 projects and understand their differences.
| React Components (v9) | React (v8) | Web Components | |
|---|---|---|---|
| Overview | New, future-proof and forward looking | Mature | Web Component implementation of Fluent UI. |
| Used By | Microsoft 365 | Office | Edge |
| Read Me | README.md | README.md | README.md |
| Changelog | CHANGELOG.md | CHANGELOG.md | CHANGELOG.md |
| Repo | packages/react-components | ./packages/react | ./packages/web-components |
| Quick Start | Quick Start | Quick Start | See README.md |
| Docs | https://react.fluentui.dev/ | aka.ms/fluentui-react | aka.ms/fluentui-web-components |
| NPM | @fluentui/react-components | @fluentui/react | @fluentui/web-components |
| Version |  |  |  |
| Issues | ?label=issues&style=flat-square) | ?label=issues&style=flat-square) |  |
Why are there two React versions? Fluent UI v8 is still widely used. We encourage you to migrate to Fluent UI v9. See the Migration overview.
FluentUI Insights
Fluent UI Insights is a series that describes the design and decisions behind the Fluent UI design system.
| EP01: Positioning | EP02: Styling | EP03: Griffel |
|---|---|---|
 |  |  |
| EP04: Foundational APIs | EP05: Theming | EP06: Accessible by default |
|---|---|---|
 |  |  |
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
You can view the complete list of additions, fixes, and changes in the CHANGELOG.md file for each package.
Looking for Office UI Fabric React?
The Office UI Fabric React project has evolved to Fluent UI.
The office-ui-fabric-react repo is now this repo (fluentui in the Microsoft organization)! The name change should not disrupt any current Fabric usage, repo clones, pull requests, or issue reporting. Links should redirect to the new location. The library formerly known as office-ui-fabric-react is now available as @fluentui/react (see above table for more information).
We have a lot in store for Fluent UI - Read our announcement here.
Looking for Fluent UI React Northstar?
Fluent UI React Northstar has been superseded by Fluent UI React Components v9. For more details about Fluent UI React Northstar, see its README.md.
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