QuickStart

import { Meta } from '@storybook/addon-docs/blocks';

Install

Fluent UI should be installed as a dependency of your app.

yarn add @fluentui/react-components

Setup

Fluent UI components are styled using CSS in JS. This technique requires a style renderer which inserts CSS into DOM when needed. React context is used to provide the style renderer.

Place a <FluentProvider /> at the root of your app and pass theme as a prop.

React 18

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

import App from './App';

const root = createRoot(document.getElementById('root'));

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

React 17

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'),
);

Usage

That's it. You can now use Fluent UI components in your app.

import React from 'react';
import { Button } from '@fluentui/react-components';

export default () => <Button appearance="primary">Get started</Button>;

Strict mode

We are aware of some strict mode bugs when using Fluent UI v9 in React 18. These bugs only show up in strict mode, and they will not stop the rest of your app from running. You can track the bugs on Github and learn how they will affect your application.

SSR with Next.js

To avoid strict mode hydration issues, you can disable strict mode in your Next.js app by adding the following configuration to your next.config.js file:

module.exports = {
  reactStrictMode: false,
};