@fluentui/react

What is @fluentui/react?

@fluentui/react is a collection of robust, reusable, and customizable React components designed to help developers build consistent and accessible user interfaces. It is part of the Fluent UI design system developed by Microsoft.

What are @fluentui/react's main functionalities?

Button

The Button component is used to trigger an action or event, such as submitting a form or saving data. The PrimaryButton is a styled variant that stands out more prominently.

import { PrimaryButton } from '@fluentui/react';

function App() {
  return (
    <PrimaryButton text="Click Me" onClick={() => alert('Button clicked!')} />
  );
}

TextField

The TextField component is used to capture user input in a text format. It can be customized with labels, placeholders, and validation messages.

import { TextField } from '@fluentui/react';

function App() {
  return (
    <TextField label="Enter your name" />
  );
}

Dropdown

The Dropdown component allows users to select an option from a list. It supports various customization options, including multi-select and search functionality.

import { Dropdown } from '@fluentui/react';

const options = [
  { key: 'A', text: 'Option A' },
  { key: 'B', text: 'Option B' },
  { key: 'C', text: 'Option C' }
];

function App() {
  return (
    <Dropdown placeholder="Select an option" options={options} />
  );
}

Modal

The Modal component is used to display content in a layer above the main application. It is useful for dialogs, forms, and other interactive content that requires user attention.

import { Modal, IconButton } from '@fluentui/react';
import { useState } from 'react';

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    <div>
      <IconButton iconProps={{ iconName: 'Add' }} onClick={() => setIsModalOpen(true)} />
      <Modal isOpen={isModalOpen} onDismiss={() => setIsModalOpen(false)}>
        <div>
          <h2>Modal Title</h2>
          <p>Modal content goes here.</p>
        </div>
      </Modal>
    </div>
  );
}

Other packages similar to @fluentui/react

material-ui

Material-UI is a popular React component library that implements Google's Material Design. It offers a wide range of components and customization options, making it a strong alternative to @fluentui/react.

antd

Ant Design (antd) is a comprehensive UI framework for React that provides a set of high-quality components and design guidelines. It is widely used in enterprise applications and offers extensive customization capabilities.

chakra-ui

Chakra UI is a modern React component library that focuses on simplicity and accessibility. It provides a set of composable and customizable components, making it a good choice for building responsive and accessible UIs.

semantic-ui-react

Semantic UI React is the official React integration for Semantic UI. It offers a variety of components that follow the Semantic UI design principles, providing a clean and consistent look and feel.

README

Fluent UI React

The React-based front-end framework for building web experiences.

Fluent UI React (formerly Office UI Fabric React) is a collection of robust React-based components designed to make it simple for you to create consistent web experiences using the Fluent Design Language.

What's changed in version 8? See the release notes.

(If you're looking for Fluent UI Northstar, formerly Stardust, use @fluentui/react-northstar instead.)

Component documentation

See the main Fluent UI website for the list of available components, API and usage documentation, and styling information.

Who uses Fluent UI React?

+ 45 additional Microsoft sites and products

Contents

• Using Fluent UI React
  • Integrating in your project
  • Version policy
  • Browser support
  • Right-to-left support
  • Server-side rendering
  • Advanced usage
• Contribute to Fluent UI React
• Licenses
• Changelog
• More information

Using Fluent UI React

Creating a new app

To create a simple React app using Create React App, install Node.js, then run:

npx create-react-app my-app --template @fluentui/cra-template
cd my-app
npm start

Integrating in an existing project

npm i @fluentui/react

This will add the package as a dependency in your package.json file and download it under node_modules/@fluentui/react.

The library includes ES module entry points under the lib folder (use lib-amd if you need AMD, or lib-commonjs if you need commonjs).

Version policy

Fluent UI React adheres to semantic versioning. However, we only consider constructs directly importable at the package level or from files at the root (e.g. @fluentui/react/lib/Utilities or @fluentui/react/lib-amd/Styling) to be part of our API surface. Everything else is considered package-internal and may be subject to changes, moves, renames, etc.

Browser support

Fluent UI React supports all evergreen browsers, with IE 11 as the min-bar version of Internet Explorer^*. See the browser support doc for more information.

^*NOTE: Internet Explorer 11 has been sunset. Features and bug fixes after the sunset date may not be compatible with IE11.

Right-to-left support

All components can render in LTR or RTL, depending on the dir attribute set on the html element (dir="rtl" will flip the direction of everything). You can also use the setRTL API if you don't have control over the html element's rendering. Example:

import { setRTL } from '@fluentui/react/lib/Utilities';

setRTL(true);

Server-side rendering

Fluent UI React components can be rendered in a server-side Node environment (or used in tests which run in an SSR-like environment), but it requires customizing how styles and SCSS files are loaded. See the server-side rendering documentation for examples of how to handle this.

Advanced usage

For info about advanced usage including module- vs. path-based imports, using an AMD bundler like RequireJS, and deployment features, see our advanced documentation.

Contribute to Fluent UI React

Please take a look at our contribution guidelines to learn how to make changes, build the repo and submit your contributions to Fluent UI.

Licenses

All files on the Fluent UI React GitHub repository are subject to the MIT license. Please read the License file at the root of the project.

Usage of the fonts and icons referenced in Fluent UI React is subject to the terms of the assets license agreement.

Changelog

We use GitHub Releases to manage our releases, including the changelog between every release. View a complete list of additions, fixes, and changes on the releases page.

More information

Please see the wiki.

---

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [e-mail] with any additional questions or comments.