Gatsby is joining Netlify: Read the announcement post

ContactSign Up for Free
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.