Office UI Fabric components built with React and CSS Modules

Downloads in past


4550.4.18 years ago9 years agoMinified + gzip package size for react-fabric in KB


react-fabric npm npm Build Status Coveralls npm
react-fabric is a set of React components that wrap the Office UI Fabric


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.
Once Webpack is set up, yu 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 not 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 fontface declaration from the office-ui-fabric package in a global stylesheet and requiring it in your layout 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";

// Layout.js

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

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