@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 experiences for Microsoft 365.

Fluent UI 7 Summary, breaking changes, and more details available in the wiki.

Fluent UI 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 System.

For information about available controls, see the Fluent UI website.

To get started using or contributing to Fluent UI, see the full readme.