Fabric React is a responsive, mobile-first collection of robust components designed to make it quick and simple for you to create web experiences using the Office Design Language.
This project is in a pre-v1 state, so we encourage you to check out the Roadmap to see what we're working towards and what this means for your usage of the control library.
Before you get started, make sure you have node.js, gulp, and git installed. To view the documentation including examples, contracts, component status, and to add functionality or fix issues locally, you can:
git clone https://github.com/OfficeDev/office-ui-fabric-react.git
This will run
gulp serve from the office-ui-fabric-react package folder, which will open a web browser with the example page. You can make changes to the code which will automatically build and refresh the page using live-reload.
To build all packages in the repo, you can use
npm run build.
To run other Gulp commands such as clean or deploy, just prepend the command with
npm run gulp and this will run the command from within the project context.
npm run gulp clean
npm run gulp deploy
Here is a step by step tutorial on how to build a simple React app with an Office UI Fabric React component.
Integrating components into your project depends heavily on your setup. The recommended setup is to use a bundler such as Webpack which can resolve NPM package imports in your code and can bundle the specific things you import.
Within an npm project, you should install the package and save it as a dependency:
npm install --save office-ui-fabric-react
This will add the fabric-react project as a dependency in your package.json file, and will drop the project under node_modules/office-ui-fabric-react.
The library includes commonjs entry points under the lib folder. To use a control, you should be able to import it and use it in your render method. Note that wrapping your application in the Fabric component is required to support RTL, keyboard focus and other features.
;;;;const MyPage = <Fabric><DefaultButton>I am a button</DefaultButton></Fabric>;ReactDOM;
For advanced usage including info about module vs. path-based imports, using an AMD bundler like Require, and deployment features, see our advanced documentation.
The Fabric React project is currently in a pre-v1 state which means that we're working hard on achieving our v1 - a set of powerful and easy to use components built to the Office Design Language that are used in production. We will be actively working on this set as teams across Office and Office 365 contribute, evolve, and use these components in their own products.
Given the early state of the project, all things are subject to change and some components may be more stable/usable than others. Use at your own risk!
Our goal is to build out the components to be:
We hope to develop more concrete goals for the project's components in the future with a primary focus on explaining which components are used in production. Stay tuned to learn more.
Fabric React contains a variety of components that are a part of the Office / Office 365 design language. If you're not seeing a component here that you'd like, first check out the Fabric React Requests Trello board and upvote it there (if it exists), or file an issue on Fabric React's issue tracker to kick off a new request.
Fabric React supports many commonly used browsers. See the browser support doc for more information.
We're excited to share our development of this project with folks outside of the company, but please keep in mind that we're moving towards a v1 state which requires that we stay focused on reaching that goal. With this in mind, take a look at our contribution guidelines for more info on how we plan to look at issues, how to structure your commit messages, and more.
All files on the Office UI Fabric React GitHub repository are subject to the MIT license. Please read the License file at the root of the project.
Usage of the fonts and icons referenced in Office UI Fabric is subject to the terms of the assets license agreement.