Norvell's Public Machinations

    TypeScript icon, indicating that this package has built-in type declarations

    7.181.0 • Public • Published

    Fluent UI React

    The React-based front-end framework for building web experiences.

    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.

    Learn about Fluent UI

    Fluent UI React current release documentation

    Fluent UI Northstar documentation for Teams developers

    Who uses Fluent UI React?


    + 45 additional Microsoft sites and products

    For more information...

    Please see the wiki.


    Using Fluent UI React

    Creating a new app

    To create a simple React app using Create React App, install Node.js, then run:

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

    See the next section for some starter code using Fluent UI React controls.

    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';

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


    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 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 with any additional questions or comments.

    The Office UI Fabric React project has evolved into Fluent UI React! We have a lot in store for Fluent UI - Read our announcement here and see more details about what this means for package consumers below.

    Fluent UI React

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

    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.

    For information about available controls, see the Fluent UI website.

    To get started using or contributing to Fluent UI React, see the full readme.

    Moving to @fluentui/react

    Going forward, the office-ui-fabric-package will be renamed to @fluentui/react. The @fluentui/react package exists today as a mirror of office-ui-fabric-react's public API surface. (Updates will still be published under both names for at least the duration of version 7.)

    If you'd like to start using @fluentui/react now, you can do so by changing your dependency and imports.

    Imports in either of these formats can be directly renamed:

    // Old
    import { TextField } from 'office-ui-fabric-react';
    import { TextField } from 'office-ui-fabric-react/lib/TextField';
    // New
    import { TextField } from '@fluentui/react';
    import { TextField } from '@fluentui/react/lib/TextField';

    However, deeper imports from internal files will not work with @fluentui/react. (These types of imports are also unsupported today, as internal file paths are considered private APIs and therefore subject to change without notice.)

    // Not supported currently; won't work with @fluentui/react
    import { TextField } from 'office-ui-fabric-react/lib/components/TextField/index';
    // Use instead
    import { TextField } from '@fluentui/react';
    import { TextField } from '@fluentui/react/lib/TextField';

    If you're currently depending on an API which you think should be public but is not exported from the top level of the package, please file an issue to discuss.




    npm i office-ui-fabric-react

    DownloadsWeekly Downloads






    Unpacked Size

    37 MB

    Total Files


    Last publish


    • microsoft1es
    • ecraig12345_msft
    • justslone
    • uifabricteam
    • dzearing