SharePoint Framework UI components

Many components are already available, as open source libraries, to build nice UX/UI.

JavaScript frameworks

Using a JavaScript framework is not mandatory but it can help having simple code.

Options are:

• Angular
• React (recommended)

Component libraries

Office UI Fabric React (soon to be replaced by Fluent UI)

→ developer.microsoft.com/fluentui

• Installation

npm install office-ui-fabric-react

• Introduction: Use Office UI Fabric React components in your SharePoint client-side web part (Get Started with Fabric React)

• Catalog: fluentui/controls/web

• Source code: microsoft/fluentui

• Examples: DocumentCard, Persona, SearchBox

Microsoft Graph Toolkit components

Library to use Microsoft Graph Toolkit in SharePoint Framework solutions.

→ SharePoint Framework library for Microsoft Graph Toolkit

• Installation

npm install @microsoft/mgt-spfx

# for React
npm install @microsoft/mgt-react

• Getting started: Build a SharePoint web part with the Microsoft Graph Toolkit

• Examples: Persona card

PnP (Microsoft 365 Patterns and Practices) components

• Property pane controls (pnp/sp-dev-fx-property-controls)

npm install @pnp/spfx-property-controls --save --save-exact

• React controls (pnp/sp-dev-fx-controls-react)

npm install @pnp/spfx-controls-react --save --save-exact