Office UI Fabric

Use Office UI Fabric to design and build web apps and add-ins that integrate with Office hosts.

Last modified: December 05, 2015

Applies to: Office 365 | Office Add-ins | SharePoint Add-ins

Fabric is a responsive, mobile-first, front-end framework that enables you to create web experiences by using the Office Design Language. Whether you’re building a new add-in or adding features to an existing one, you can use Fabric to integrate seamlessly with Office host applications.

With Fabric, you can:

  • Standardize UI patterns in code, via common HTML, CSS, theming, iconography, and patterns.

  • Apply a common set of styles to add-ins you develop for all products and platforms.

  • Create experiences that look and feel like they're part of Office.

To get started with Fabric, clone the Office UI Fabric repository on GitHub. See also the interactive Office UI Fabric website for details about how to get started and the styles and components that are available.

Take advantage of Fabric's features to design world-class add-ins. With Fabric, you get...

A palette that creates an Office 365 experience, right out of the .zip file.

Official Office 365 features and components, from products like SharePoint, Outlook Web App, and OneDrive.

Approved colors to help you paint your experience harmoniously with Office applications.

Animations that bring your experience to life.

Components that follow the Office 365 paradigm.

A responsive grid to enable your content to flow and look great across devices.

Fabric features and components

Fabric includes features and components for common elements of your add-ins, and allows for powerful customization.

Features

Common components

Specialized components

Typography

Color

Icons

Animations

Responsive grid

Localization

Buttons

Drop-down lists

Radio buttons

Check boxes

Form fields

Search boxes

Toggle switches

Text fields

Lists

Dialogs (with overlay)

Callouts

Navigation bars

Pivots

Personas

Tables

Build with Fabric for an easy and customizable experience that integrates with your other frameworks.

Just like other popular frameworks, but built from the ground up for Office 365 without excessive overriding.

All about styling instead of JavaScript, so you can focus on your look and feel.

Integrates with other frameworks, like Bootstrap.

Uniquely named classes to prevent conflicts.

Built with LESS for powerful customization.

Language support (including right-to-left behavior) to simplify localization.
Show: