Menu
Get started View on GitHub

Get Started

Quick start

The simplest way to get started is to add a copy of Fabric to your project.

  1. Download the source code zip file from the latest release on GitHub.
  2. Unzip the file and copy the Fabric folder into your project.
  3. Add a reference to fabric.css in the <head> of your page. Make sure the path is correct.
  4. If you're using components, add a reference to fabric.components.css after the fabric.css reference.

Using Fabric icons and fonts

Now that your project references Fabric, you can apply type styles to any text element.

<span class="ms-font-su ms-fontColor-themePrimary">Big blue text</span>

To use icons, add an <i> element with the appropriate icon classes.

<i class="ms-Icon ms-Icon--mail" aria-hidden="true"></i>

By default, icons inherit the text size and color of their parent. To override this, apply type styles directly to the icon.

Using components

To use Fabric components:

  1. Add markup to your pages using the appropriate classes.
  2. If the component requires JavaScript, you can use the sample JavaScript included in the latest release on GitHub.
  3. Initialize the component JavaScript, and you’re all set! For an example that shows how to initialize the JavaScript, see the components page.

Other ways to get Fabric

In addition to downloading a copy for your project, you can include Fabric via a CDN reference, by adding it through a package manager, or by building your own copy from the source code.

Reference the CDN

If you prefer to have your project's assets stored on an external server, Fabric is available from the apps for Office CDN. To use it, include the following references in the <head> of your page.

<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.2.0/fabric.min.css">
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.2.0/fabric.components.min.css">

New versions of Fabric might not be available on the CDN right away. The following table lists the releases that are available now. To reference a specific version, update the version number in the URL to match the one you want.

Fabric Release Available on CDN
2.6.1 Version 2.6.1 Not available on the CDN
2.6.0 Version 2.6.0 Not available on the CDN
2.5.0 Version 2.5.0 Not available on the CDN
2.4.1 Version 2.4.1 Not available on the CDN
2.4.0 Version 2.4.0 Not available on the CDN
2.3.0 Version 2.3.0 Not available on the CDN
2.2.0 Version 2.2.0 Available on the CDN
2.1.0 Version 2.1.0 Available on the CDN
2.0.1 Version 2.0.1 Available on the CDN
1.2.1 Version 1.2.1 Available on the CDN
1.1.3 Version 1.1.3 Available on the CDN
1.1.2 Version 1.1.2 Available on the CDN
1.1.1 Version 1.1.1 Available on the CDN
1.0.0 Version 1.0.0 Available on the CDN

Package managers

Fabric is also available from a variety of package managers, including Bower, npm, and the NuGet Package Manager. You can quickly add Fabric as a package and stay up to date with the latest version.

Install with Bower

To install Fabric using Bower, run the following command:

$ bower install office-ui-fabric

Install with npm

To install Fabric using npm, run the following command:

$ npm install office-ui-fabric

Install with NuGet Package Manager

To install Fabric's NuGet package, run the following command in the package manager console:

PM> Install-Package OfficeUIFabric

Build from source

Fabric is easy to build and customize locally using gulp and a handful of tasks to watch and build specific parts of the toolkit. You can also use gulp to build and tweak demos and samples.

For more information about how to build Fabric locally, including gulp tasks, check out our instructions on GitHub.