Back to List

Fabric React Primer on Components, Controls and Theming

Will Spiering Will Spiering  |  
Nov 12, 2019

React is one of the most used and beloved JavaScript libraries for building user interfaces. There's no shortage of UI frameworks out there to help make developing great React apps quicker and simpler. You may have heard of a couple of the really popular ones like React Bootstrap or Material UI, but there is another one that doesn't get as much attention: Fabric React.

Fabric React is the framework built on top of Microsoft's Fluent Design language, much like Material UI is built off of Google's Material Design. It's used by Microsoft on many of their products and sites from Outlook to Word, PowerPoint, and SharePoint.

Personally, I enjoy using it because I like how the styling is different than Bootstrap, and the documentation is really helpful with great examples and best practices for all their components.


Getting Started

It's easy to get started with Fabric in your React projects, whether you are starting from scratch or you intend to add it to an existing project.

To get familiar with all the controls and components in various frameworks, I usually like to spin up a demo environment in CodeSandbox. It's easy to add Fabric React to a project's dependencies by searching for "office-ui-fabric-react" from the Explorer panel in CodeSandbox.

If you want to add it to an existing React project, you can add the package with npm with:

npm install office-ui-fabric-react

Fabric Component

When building your app with Fabric, it is recommended that you wrap all your content in a Fabric component. This can be a replacement to your root div, and it brings default fonts and styling so your app looks consistent.

import { Fabric } from "office-ui-fabric-react";

function App() {
    return <Fabric>// All your components here</Fabric>;


fabric react icons

Fabric has a great icon library but they aren't included in the Fabric React package by default. Many controls use the icons so you will need to add the package and initialize them at the root of the app.

import { initializeIcons } from "@uifabric/icons";


Go to Controls

Now that you're ready to start building with Fabric, let's start adding some controls. These are some of the Fabric controls I use most often. I've included their individual imports and components with minimal props to get you up and running.



import { Fabric, DefaultButton, PrimaryButton } from "office-ui-fabric-react";

          onClick={() => console.log("You clicked Standard")}
          onClick={() => console.log("You clicked Primary")}


(See ChoiceGroup component options)
import { ChoiceGroup } from "office-ui-fabric-react";

            key: "Lions",
            text: "Lions",
            disabled: true,
            key: "Tigers",
            text: "Tigers",
            key: "Bears",
            text: "Bears",
            key: "Ohh my",
            text: "Ohh my",
    label="Pick one"


(See Slider options)
import { Slider } from "office-ui-fabric-react";

    label="Pizza Size"
    onChange={(value: number) => console.log(value)}


import { DatePicker } from "office-ui-fabric-react";

<DatePicker placeholder="Select a date..." ariaLabel="Select a date" />;


(See Panel options)
import { Panel } from "office-ui-fabric-react";

    onDismiss={() => setIsPanelOpen(false)}
    headerText="Panel Header"
    <h3>Panel Content Goes Here</h3>
    <p>Throw in your form inputs or more details on what you clicked on here.</p>

There a ton of other controls, and I highly encourage you to check out the Controls page of the Fabric React documentation for the full list of controls.



fabric react theming designer

Fabric also has a theme designer that allows you to generate a theme by picking three colors and then preview the theme being applied to many of the Fabric controls.

It has a great accessibility checker built in that will flag issues where there isn't enough contrast between your selected colors. This will allow you to make changes to your selected colors on the fly to improve the accessibility of your application.

If you happen to be doing any SharePoint development one of the great things about the theme designer is that you can see all the Semantic Slots that are used throughout the controls. These semantic slots are used to allow your controls to dynamically change based on where they are used in SharePoint. For example; adding a list to a section of a page with a light background will have dark text, but if you were to add it to a dark background it will invert the text making it easier to read.

Give it a shot and after you have a theme that you like it's easy to export it to your app. You can just copy it to your app by clicking on the Export theme button and choosing how you would like to apply it to your app whether it being JavaScript, JSON, or PowerShell.


Final Words

Here is a sample sandbox with all the above mentioned controls being used. Go add more from the docs or update the theme palette with your own from the Theme Designer.

I hope you give Fabric React a try and maybe it will be the React framework that you reach for when you start your next project!



Love our Blogs?

Sign up to get notified of new Skyline posts.


Related Content

Spring 2019 Kentico User Group
Apr 17, 2019
Location: Waukesha County Technical College - Pewaukee Campus - 800 Main Street, Pewaukee, Wisconsin 53072 - Building: Q, Room: Q361
Blog Article
Accelerating Flow in the IT Value Stream
Bob SchommerBob Schommer  |  
Jul 21, 2020
Every CIO grapples with how to rapidly turn customer needs or good business ideas into working software to meet the demands of a VUCA (volatile, uncertain, complex, and ambiguous) world. With traditional waterfall development methodologies, it frequently takes months (or even years) before...
Blog Article
How API Integrations Can Give Your Business One Source of Truth
Nick DopkinsNick Dopkins  |  
Feb 25, 2020
As an organization grows, so does its IT stack and the amount of applications it manages. If left unchecked, this can result in a multitude of disjointed programs that duplicate data, repeat logic, and know nothing about each other.   Implementing API integration to formulate one source of...
Blog Article
Using Hooks to Reactify a Plain JavaScript Library: A Walkthrough
Andrew PetersenAndrew Petersen  |  
Aug 06, 2019
React Hooks make it really easy to wrap a vanilla JavaScript library with a React component so you can easily reuse it throughout your app and stay in "React Mode".In this walkthrough I'll be focusing on a single library, Shave.js, but the techniques and ideas should be applicable...
Blog Article
How to Create a Readable and Useful Bug Report
Blayne RoselleBlayne Roselle  |  
Jun 25, 2019
Creating a bug that is both readable and provides enough detail is a must-have skill for a Quality Assurance Analyst. Not only will it help when it comes time to retest, but it also provides credibility with your development team. In the content below, I will share the best practices for creating...