[DEPRECATED] Office UI Fabric components built with React
Clone or download


react-fabric npm npm Build Status Coveralls npm

react-fabric is a set of React components that wrap the Office UI Fabric


Use office-ui-fabric-react


react-fabric can be installed as an npm package

$ npm install --save react-fabric

Please note that you also have to install all missing peer depencies.


Before you start using react-fabric it is recommended to setup a basic Webpack workflow with babel-loader, css-loader and sass-loader. A minimal starter project is React Hot Boilerplate.

Dont forget to enable CSS modules support for the css-loader

    test: /\.css/,
    loader: 'style!css?modules'

Once Webpack is set up, you can just require react-fabric and use the components

import React from 'react';
import Button from 'react-fabric/lib/Button';

const SaveButton = ({ onClick }) => (
  <Button type="hero" glyph="save" onClick={onClick}>Save</Button>

export default SaveButton

The above code creates a custom SaveButton component based on the hero button component of fabric ui. Please note that all the required SASS for the button component is automatically required by the module.

Fonts & Icons

react-fabric does not load any of the required font files automatically. The recommended way is to get the fonts from the Office CDN by simply importing the font-face declarations from the office-ui-fabric package in a global stylesheet and requiring it in your root component.

// globals.scss
@import "~office-ui-fabric/src/sass/Fabric.Typography.Fonts.Output.scss";
@import "~office-ui-fabric/src/sass/Fabric.Icons.Font.Output.scss";
// Root.js

const Root = () => {
  // ...

Alternatively, just require the fonts module from react-fabric

// Root.js

const Root = () => {
  // ...

Example / Docs

The docs project included in this repository doubles as the example project. To run the docs project, follow these steps:

$ npm install
$ cd docs/
$ npm install
$ npm start
$ open 'http://localhost:3030'


All components are unit tested. To run the tests, follow these steps:

$ npm install
$ npm test


This project is licensed under the terms of the MIT License