Getting Started with Fluent UI React v9

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.

Fluent UI React v9 is the UI library focused on React development for Microsoft 365 platforms like Teams Apps, Office Add-ins, and even stand along web app development.

The following is quick tutorial to get you up and running with the latest version of the library.

This tutorial assumes you have a React project up and running like Create React App and you are ready to add some UI components.

1. Install the npm package

Install the component suite package with your favorite package manager

npm

npm install @fluentui/react-components

yarn

yarn add @fluentui/react-components

2. Add a FluentProvider and Theme

A FluentProvider and a Theme are required for providing the right visual context for the UI Components so that they render properly. Without it, the components will not have any visuals.

import React from 'react';
import ReactDOM from 'react-dom';
import { FluentProvider, webLightTheme } from '@fluentui/react-components';

import App from './App';

ReactDOM.render(
  <FluentProvider theme={webLightTheme}>
    <App />
  </FluentProvider>,
  document.getElementById('root'),
);

3. Add Components

Fluent UI React v9 has two categories of components:

1. Stable - Components with stable APIs that will version according to Semantic Versioning. These are exported from the top level package.
2. Preview - Components with APIs that may change or may not have complete feature set. These components are exported out of the /unstable deep import

import React from 'react';
import ReactDOM from 'react-dom';
import { FluentProvider, webLightTheme, Button } from '@fluentui/react-components';
import { Select } from '@fluetui/react-components/unstable'; // Preview components deep import

ReactDOM.render(
  <FluentProvider theme={webLightTheme}>
    <Button appearance="primary">Hello World!</Button>
    <Select>
      <option>Red</option>
      <option>Green</option>
      <option>Blue</option>
    </Select>
  </FluentProvider>,
  document.getElementById('root'),
);

And that's all you need to get started using Fluent UI React v9.

Don't forget to check out https://react.fluentui.dev for more code samples and find out the latest on GitHub.

Lastly, here's a full CodeSandbox:

Enjoy!