@fluentui/react-components

Converged Fluent UI React components

This is a suite package for converged components and related utilities. It is a result of a dedupe effort for @fluentui/react and @fluentui/react-northstar.

Usage

Add @fluentui/react-components to a project:

yarn add @fluentui/react-components

To use a component, add a FluentProvider with a theme close to the root of your application and then instantiate components inside the provider's subtree:

import React from 'react';
import ReactDOMClient from 'react-dom/client';
import { FluentProvider, teamsLightTheme, Button } from '@fluentui/react-components';

ReactDOMClient.createRoot(document.getElementById('root')).render(
  <FluentProvider theme={teamsLightTheme}>
    <Button appearance="primary">I am a button.</Button>
  </FluentProvider>,
);

Docs

Docs are hosted at https://react.fluentui.dev/.