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:
- Stable - Components with stable APIs that will version according to Semantic Versioning. These are exported from the top level package.
- 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!
Top comments (0)