Skip to content
We've moved! UI Fabric is now Fluent UI - A set of React components for building Microsoft web experiences.
TypeScript JavaScript CSS HTML
Branch: master
Clone or download

Latest commit

czearing Addressing PR feedback for SearchBox and VerticalDivider examples (#1…
…2563)

* Examples update

* Change files

* Simplified SearchBox return statement and brackets

* Snapshot update for VerticalDividerBasicExample

* Optimizing SearchBox and VerticalDivider examples component render

* Change files

* Deleting extra change file.

* Change files

* Added change file
Latest commit 5862f96 Apr 6, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.githooks no prepush (#9926) Jul 24, 2019
.github Clarify which contributing docs refer to what (#12384) Mar 25, 2020
.vscode Run prettier on all files: 120 line length, trailing commas (#12309) Mar 19, 2020
apps Incorrect tense (#12058) Apr 6, 2020
change Addressing PR feedback for SearchBox and VerticalDivider examples (#1… Apr 7, 2020
ghdocs Replace OfficeDev/office-ui-fabric-react with microsoft/fluentui (#12378 Mar 21, 2020
packages Addressing PR feedback for SearchBox and VerticalDivider examples (#1… Apr 7, 2020
scripts feat(icons): remove Icon component and update docs (#12549) Apr 6, 2020
specs Replace OfficeDev/office-ui-fabric-react with microsoft/fluentui (#12378 Mar 21, 2020
typings Renaming @fluentui/react to @fluentui/react-northstar (#12302) Mar 18, 2020
.appveyor.yml Run prettier on all files (#12042) Feb 24, 2020
.gitignore Fluent: Enable stats collection (#12070) Feb 28, 2020
.gulp.js Run prettier on all files: 120 line length, trailing commas (#12309) Mar 19, 2020
.npmrc Update .npmrc Feb 17, 2018
.prettierignore Lint and prettier updates (#12214) Mar 6, 2020
6.0_RELEASE_NOTES.md Run prettier on all files (#12042) Feb 24, 2020
LICENSE Update Fabric website to "Fluent" (#12366) Mar 25, 2020
README.md Simplified Readme to include neccessary details (#12465) Apr 6, 2020
azure-pipelines.artifacts.yml Fluent: Enable stats collection (#12070) Feb 28, 2020
azure-pipelines.bundlesize.yml Replace OfficeDev/office-ui-fabric-react with microsoft/fluentui (#12378 Mar 21, 2020
azure-pipelines.cache.yml fixes the docgen plugin to inject base and cwd for caching purposes (#… Mar 4, 2020
azure-pipelines.hotfix.yml CI: Break up Build & Test, Add Parallelization (#11574) Jan 7, 2020
azure-pipelines.perf-test.yml Replace OfficeDev/office-ui-fabric-react with microsoft/fluentui (#12378 Mar 21, 2020
azure-pipelines.release-fluentui.yml Updating account display name. Mar 23, 2020
azure-pipelines.release.yml Updating account display name. Mar 23, 2020
azure-pipelines.tools.yml Split out screener and perf-test jobs into different pipelines (clean… Jan 14, 2020
azure-pipelines.yml Replace OfficeDev/office-ui-fabric-react with microsoft/fluentui (#12378 Mar 21, 2020
babel.config.js Run prettier on all files: 120 line length, trailing commas (#12309) Mar 19, 2020
dangerfile.ts Fluent: Perf CI (#11982) Feb 21, 2020
gulpfile.ts Run prettier on all files: 120 line length, trailing commas (#12309) Mar 19, 2020
lerna.json chore: create a separate "lerna.json" for FluentUI v0 (#12159) Mar 4, 2020
package.json Minor script fixes (#12370) Mar 24, 2020
prettier.config.js Run prettier on all files: 120 line length, trailing commas (#12309) Mar 19, 2020
sizeauditor.json Add Size auditor configuration file (#10025) Aug 3, 2019
yarn.lock chore(jest): add typeahead for watch mode (#12467) Apr 3, 2020

README.md

🎉 The Office UI Fabric React project has evolved to Fluent UI. 🎉

The office-ui-fabric-react repo has moved! This should not disrupt any current Fabric usage, repo clones, pull requests or issue reporting. Links should redirect to the new location.

We have a lot in store for Fluent UI - Read our announcement here.

Fluent UI React

The React-based front-end framework for building experiences for Microsoft 365.

npm version Build Status

Fluent UI 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.

Who uses Fluent UI React?

image

+ 45 additional Microsoft sites and products

For more information...

Please see the wiki.

Contents

Using Fluent UI React

Create a new app

To create a simple React app install node.js, then run:

npx create-react-app my-app
cd my-app
npm install @fluentui/react
npm start

For further information, visit https://create-react-app.dev

Integrating in your project

npm i @fluentui/react

# Or, use yarn
yarn add @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 ES2015 module entry points under the lib folder (use lib-amd if you need AMD, or lib-commonjs if you need commonjs). To use a control, import it and then use it in your render method:

import React from 'react';
import ReactDOM from 'react-dom';
import { PrimaryButton } from '@fluentui/react/lib/Button';

ReactDOM.render(
  <PrimaryButton>I am a button.</PrimaryButton>,
  document.getElementById('root')
);

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.

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:

import { setRTL } from '@fluentui/react/lib/Utilities';

setRTL(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 for more info. Also read Contribute bug fixes and Contribute new component.

Building the repo

Before you get started, make sure you have read the Git branch setup instructions

To view the documentation including examples, contracts, component status, and to add functionality or fix issues locally, you can:

  1. git clone https://github.com/microsoft/fluentui.git
  2. cd fluentui
  3. yarn
  4. yarn builddemo
  5. yarn start

This will start a demo page from the office-ui-fabric-react package folder, which will open a web browser with the example page. You can make changes to the code which will automatically build and refresh the page using live-reload.

To build and run tests for all packages in the repo, run yarn build from the root.

To build individual packages within the packages/* or apps/* folders, cd to the relevant folder and run yarn build. Note that because the packages are symlinked together, you must manage building dependencies in the right order, or use the yarn buildto script to build to the specific package you want.

Advanced build commands

There are more advanced build commands listed in the Build Commands wiki page.

Testing

For info about testing, see our testing documentation.

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 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.


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.

You can’t perform that action at this time.