🎉 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.
The React-based front-end framework for building experiences for Microsoft 365.
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.
+ 45 additional Microsoft sites and products
Please see the wiki.
To create a simple starter app using Fluent UI components, install the latest LTS node.js, then run:
npm init uifabric
It'll prompt you for a project name. If you choose to create a project called my-app
, you can start working on the project like this:
cd my-app
npm start
This scaffold uses the just
build library. It is very flexible and requires no "eject" script to allow for customization on its configurations.
If you prefer to use create-react-app
, follow these instructions.
How to integrate components into your project depends heavily on your setup. The recommended setup is to use a bundler such as Webpack which can resolve NPM package imports in your code and bundle only the specific things you import.
Within an npm project, you should install the package and save it as a dependency:
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'));
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.
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.
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);
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.
For info about advanced usage including module- vs. path-based imports, using an AMD bundler like RequireJS, and deployment features, see our advanced documentation.
Please take a look at our contribution guidelines for more info. Also read Contribute bug fixes and Contribute new component.
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:
git clone https://github.com/microsoft/fluentui.git
cd fluentui
yarn
yarn builddemo
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.
There are more advanced build commands listed in the Build Commands wiki page.
For info about testing, see our testing documentation.
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.
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.