Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub


Gatsby plugin for the Office Fabric UI framework. Adds the boilerplate needed for server-side rendering, which Gatsby performs during gatsby build.


npm install office-ui-fabric-react gatsby-plugin-fabric-ui


After installing the plugin, add it to your site’s config file:


module.exports = {
    plugins: ['gatsby-plugin-fabric-ui'],

Then you can use any of the components as usual:

import React from 'react';
import { DefaultButton } from 'office-ui-fabric-react';

const Index = () => (
        <DefaultButton>Hello, world!</DefaultButton>

export default Index;

See the test folder for an example Gatsby site.


Currently only tested with:

  • react v16
  • gatsby v2
  • office-ui-fabric-react v6


  1. Clone this repo.
  2. npm install
  3. Make changes to gatsby-ssr.jsx. Please also prettier via npm run format.
  4. To test your changes, run the sample project:
cd test
npm install
npm run build # test that SSR works properly
npm run develop # launches the sample site
  1. In the main package, you can also run npm test.
© 2023 Gatsby, Inc.