What is Microsoft Fluent UI (with React)

In this SharePoint tutorial, we will discuss on what is Microsoft fluent ui? How to use fluent ui in SPFx web part with React. We can easily use fluent UI with SharePoint Framework (SPFx) web part and also we will see how to use/integrate fluent UI with react application.

Note: Previously known as Office UI Fabric and in the early 2020, Microsoft renamed Office UI Fabric to Fluent UI.

What is Microsoft fluent ui (Microsoft Fluent Design System)

Now, let us first what is Microsoft fluent ui?

According to Microsoft documentation, Fluent is an open-source, cross-platform design system that gives designers and developers the frameworks they need to create engaging product experiences—accessibility, internationalization, and performance included.

Let us understand what it is now!

For every product company, the user interface or the user experience is very important.

For example, Google has Material Design or Saleforce has Lightning Design. Google created the design system as Material design that will help to build same user experience for Android, iOS, Flutter, and the web. It provides various components for creating similar user interface for Android, iOS, Flutter, and the web.

That is the reason, Google provides consistent user experience across applications like Gmail, YouTube, Google Sheet, Google Docs, Google Drive, etc.

So the design is consistent across applications.

To make a similar user interface, the design system will have principles, Components, Theming, Color, Typography, Shape, etc.

In the same way, Microsoft has a design system known as Fluent Design System. The intension is to have similar consistent design for various plantforms like IOs, Android, Windows, macOS and the web and also for constient look and feel for various products like word, excel, powerpoint, powerapps, power bi or power automate and other Office 365 applications.

What is fluent ui? Microsoft fluent ui or design system is an ecosystem helps to create consistent user experience accorss all platforms like Web, Mobile (Windows, iOS, Android), macOS, Desktop etc.

Fluent UI is an open source project, so anyone can contribute to the project.

Where Microsoft is using Fluent UI?

Microsoft is using fluent ui very frequently in almost all the applications like Word, Excel, PowerPoint, Microsoft Teams, OneNote, OneDrive, SharePoint, PowerApps, Power Automate, Power BI, Forms, etc.

Fluent UI flavors (Web)

If you want to use Microsoft Fluent UI for web, then it comes in two flavors:

• Fluent UI React
• Fabric Core

We will see in details now, how to use Fluent UI react and Fabric core.

Fluent UI – Fabric UI React Example

As I said before, we can use Fabric UI react we can use with react application.

Fabric UI react provides various react controls that we can use within our react applications. A few controls are:

Here, we will now create a react application and then we will see use fluent ui react on that.

If you have an existing react application, then you can first install fluent ui react by using the below npm command or yarn command, so that the controls will be available in the react application to use.

npm install @fluentui/react

yarn add @fluentui/react

And you can follow the below steps to create a new react application:

You can also check out a video on Microsoft fluent ui react tutorial for beginners.

Create a folder and navigate to the folder in any command prompt like node js command prompt.

npx create-react-app my-app

It will take sometime and it will create our react app like below:

Once it is created you can use the below command to run and see the output in the live server.

cd my-app

npm start

The default output we can see in the browser.

In the same command prompt, execute the below command to open the application using visual studio code. (Use Ctrl + C to stop the execution)

code .

Once the project opened in visual studio code, expand the src folder and open App.js folder. By default, the code will be like below:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Here, we will add a fluent ui react button control.

First install the fluent ui like below:

npm install @fluentui/react

Then we need to add the import statement like below:

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

Then we can use the below code to add buttons:

<DefaultButton text="Standard" onClick={clickhere} />

<PrimaryButton text="Primary" onClick={clickhere} />

Here clickhere is a function that will get called, when user click on the button.

The complete code looks like below:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { DefaultButton, PrimaryButton } from 'office-ui-fabric-react';

function App() {
    return (
        <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <DefaultButton text="Standard" onClick={clickhere} />
        <br/>
      <PrimaryButton text="Primary" onClick={clickhere} />
      </header>
      
    </div>
  );   
}

function clickhere() {
    alert('Click Here')
}

export default App;

Once you run the react app, you can see the buttons will appear like below:

This is how, we can use fluent ui react in a react application.

Microsoft fluent ui react with SPFx Web Part

Now, we will see here, how to use fluent ui with SharePoint framework (SPFx) web parts.

We can use various fluent ui react controls in our SPFx web parts.

First create an SPFx client side web part and choose React Framework. If are new to SharePoint framework development, check out an article on how to set up development environment for SharePoint framework.

Once the web part is ready, run the below command in the same folder.

npm i @fluentui/react

Now, we can use the fluent ui react controls in the SPFx web part.

Now, navigate to the src -> web parts \ <web part name> -> Components and then open the <web part name>.tsx file.

Here, we will see how we can use the react button control as well as we will see how to an icon in a react button control in our SPFx web part.

In the same file, write the below import statements.

import { DefaultButton, PrimaryButton } from 'office-ui-fabric-react';
import { Icon } from '@fluentui/react/lib/Icon';

Once we add the import statements, then we can use the buttons and icons in the spfx web part. You can get the icons from this URL.

Here, we have used the button controls like below:

<DefaultButton text='Click Here' onClick={_alertClicked}/>
      <br/><br/>
      <DefaultButton iconProps={{ iconName: 'NewFolder' }}  onClick={_alertClicked}/>

The full code looks like below:

import * as React from 'react';
import styles from './HelloWorld.module.scss';
import { IHelloWorldProps } from './IHelloWorldProps';
import { escape } from '@microsoft/sp-lodash-subset';
import { NeutralColors } from '@fluentui/theme';
import { initializeIcons } from '@uifabric/icons';
import { DefaultButton, PrimaryButton } from 'office-ui-fabric-react';
import { Icon } from '@fluentui/react/lib/Icon';
export default class HelloWorld extends React.Component<IHelloWorldProps, {}> {
  public render(): React.ReactElement<IHelloWorldProps> {
    return (
      <div>
      <DefaultButton text='Click Here' onClick={_alertClicked}/>
      <br/><br/>
      <DefaultButton iconProps={{ iconName: 'NewFolder' }}  onClick={_alertClicked}/>
      </div>
    );
  }  
}
function _alertClicked(): void {
  alert('Clicked');
}

Now, if you run the gulp serve, and add the web part in the local workbench, you can see the buttons looks like below:

This is how, we can use react ui controls in a SPFx web parts.

Microsoft Fluent UI – Fabric Core Example

Now, let us see how to use Microsoft fluent ui with non-react application.

We can use fluent ui in an HTML page itself.

Now, we will see another fluent ui example on how to use fabric core in a HTML page.

As I said before, fabric core is a collection of CSS classes and Saas mixins where you can get access to colors, animations, fonts, icons and grid.

Fabric core we can use in non-react applications or static pages. We can also use fabric core in SharePoint framework (SPFx) web parts. We can use in no javascript framework spfx web parts.

Just refer the below URL in the HTML page:

<link
  rel="stylesheet"
  href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/11.0.0/css/fabric.min.css"
/>

Then you can use the classes in div.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fabric Core Examples</title>
    <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/11.0.0/css/fabric.min.css" />
</head>

<body class="ms-Fabric">

    <span class="ms-font-su ms-fontColor-themePrimary">This is a sample text</span>
</body>

</html>

This is how we can use Microsoft fluent ui fabric core in non-react application.

You may like the following spfx tutorials:

In this tutorial, we learned,

• What is fluent ui
• fluent ui tutorial
• Fluent ui example
• Flent ui with fabric ui react example
• Microsoft fluent ui react with SPFx Web Part
• Microsoft Fluent UI – Fabric Core Example