or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

buttons.mddata-display.mdforms.mdindex.mdlayout.mdnavigation.mdoverlays.mdpickers.mdstyling-theming.mdutilities.md
tile.json

index.mddocs/

Fluent UI React

Fluent UI React is Microsoft's comprehensive React-based UI component library that implements the Fluent Design Language. It provides over 100 robust, accessible, and customizable React components for building consistent web experiences across Microsoft products and beyond.

Package Information

  • Package Name: @fluentui/react
  • Package Type: npm
  • Language: TypeScript
  • Version: 8.123.5
  • Installation: npm install @fluentui/react

Core Imports

import { 
  DefaultButton, 
  PrimaryButton, 
  TextField, 
  Stack, 
  Text,
  ThemeProvider,
  createTheme
} from "@fluentui/react";

For CommonJS:

const { 
  DefaultButton, 
  PrimaryButton, 
  TextField, 
  Stack, 
  Text,
  ThemeProvider,
  createTheme
} = require("@fluentui/react");

Individual component imports for tree-shaking:

import { DefaultButton } from "@fluentui/react/lib/Button";
import { TextField } from "@fluentui/react/lib/TextField";
import { Stack } from "@fluentui/react/lib/Stack";

Basic Usage

import React from "react";
import { 
  DefaultButton, 
  PrimaryButton, 
  TextField, 
  Stack, 
  Text,
  ThemeProvider,
  createTheme
} from "@fluentui/react";

const myTheme = createTheme({
  palette: {
    themePrimary: '#0078d4',
  },
});

function App() {
  const [name, setName] = React.useState('');

  return (
    <ThemeProvider theme={myTheme}>
      <Stack tokens={{ childrenGap: 15 }} styles={{ root: { padding: 20 } }}>
        <Text variant="xLarge">Welcome to Fluent UI React</Text>
        
        <TextField
          label="Enter your name"
          value={name}
          onChange={(_, newValue) => setName(newValue || '')}
          placeholder="Type here..."
        />
        
        <Stack horizontal tokens={{ childrenGap: 10 }}>
          <PrimaryButton 
            text="Primary Action" 
            onClick={() => alert(`Hello, ${name}!`)}
            disabled={!name}
          />
          <DefaultButton text="Secondary Action" />
        </Stack>
      </Stack>
    </ThemeProvider>
  );
}

Architecture

Fluent UI React is built around several key architectural patterns:

  • Component System: 100+ React components following consistent prop and styling patterns
  • CSS-in-JS Styling: Merge styles system with theme support and design tokens
  • Accessibility First: WCAG-compliant components with focus management and ARIA support
  • Theming System: Comprehensive theming with design tokens and customization capabilities
  • TypeScript Integration: Full TypeScript support with strict type definitions
  • Tree Shaking: Modular architecture supporting individual component imports
  • Performance: Virtualized lists, memoization, and lazy loading for large datasets

Capabilities

Button Components

Interactive button components with various styles and behaviors for actions and navigation.

// Core button components
function DefaultButton(props: IButtonProps): JSX.Element;
function PrimaryButton(props: IButtonProps): JSX.Element;
function ActionButton(props: IButtonProps): JSX.Element;
function CompoundButton(props: IButtonProps): JSX.Element;
function IconButton(props: IButtonProps): JSX.Element;

interface IButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  text?: string;
  iconProps?: IIconProps;
  href?: string;
  primary?: boolean;
  disabled?: boolean;
  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
  styles?: IButtonStyles;
  theme?: ITheme;
}

Button Components

Form Controls

Comprehensive form input components with validation, masking, and accessibility features.

// Core form components
function TextField(props: ITextFieldProps): JSX.Element;
function Dropdown(props: IDropdownProps): JSX.Element;
function ComboBox(props: IComboBoxProps): JSX.Element;
function Checkbox(props: ICheckboxProps): JSX.Element;
function Toggle(props: IToggleProps): JSX.Element;
function ChoiceGroup(props: IChoiceGroupProps): JSX.Element;

interface ITextFieldProps {
  label?: string;
  value?: string;
  placeholder?: string;
  multiline?: boolean;
  required?: boolean;
  disabled?: boolean;
  errorMessage?: string;
  onChange?: (event: React.FormEvent<HTMLInputElement>, newValue?: string) => void;
  onGetErrorMessage?: (value: string) => string | Promise<string>;
}

Form Controls

Data Display

High-performance data display components for lists, tables, cards, and complex data structures.

// Core data display components
function DetailsList<T>(props: IDetailsListProps<T>): JSX.Element;
function List<T>(props: IListProps<T>): JSX.Element;
function GroupedList<T>(props: IGroupedListProps<T>): JSX.Element;
function DocumentCard(props: IDocumentCardProps): JSX.Element;
function Persona(props: IPersonaProps): JSX.Element;

interface IDetailsListProps<T> {
  items: T[];
  columns: IColumn[];
  selection?: ISelection;
  selectionMode?: SelectionMode;
  onItemInvoked?: (item: T, index?: number) => void;
  onRenderRow?: (props: IDetailsRowProps) => JSX.Element | null;
  layoutMode?: DetailsListLayoutMode;
  constrainMode?: ConstrainMode;
}

Data Display Components

Navigation

Navigation components for building consistent navigation experiences and command interfaces.

// Core navigation components
function Nav(props: INavProps): JSX.Element;
function CommandBar(props: ICommandBarProps): JSX.Element;
function Breadcrumb(props: IBreadcrumbProps): JSX.Element;
function Pivot(props: IPivotProps): JSX.Element;
function ContextualMenu(props: IContextualMenuProps): JSX.Element;

interface INavProps {
  groups?: INavLinkGroup[];
  selectedKey?: string;
  onLinkClick?: (event: React.MouseEvent<HTMLElement>, item?: INavLink) => void;
  onRenderLink?: (link: INavLink) => JSX.Element | null;
  styles?: INavStyles;
}

Navigation Components

Overlays & Dialogs

Modal overlays, dialogs, callouts, and tooltips for secondary content and user interactions.

// Core overlay components
function Modal(props: IModalProps): JSX.Element;
function Panel(props: IPanelProps): JSX.Element;
function Dialog(props: IDialogProps): JSX.Element;
function Callout(props: ICalloutProps): JSX.Element;
function Tooltip(props: ITooltipProps): JSX.Element;

interface IModalProps {
  isOpen?: boolean;
  onDismiss?: (event?: React.MouseEvent<HTMLButtonElement>) => void;
  isBlocking?: boolean;
  isDarkOverlay?: boolean;
  className?: string;
  containerClassName?: string;
  dragOptions?: IDragOptions;
}

Overlay Components

Layout & Structure

Layout components for organizing content, managing focus, and creating responsive designs.

// Core layout components
function Stack(props: IStackProps): JSX.Element;
function StackItem(props: IStackItemProps): JSX.Element;
function Fabric(props: IFabricProps): JSX.Element;
function ScrollablePane(props: IScrollablePaneProps): JSX.Element;
function FocusZone(props: IFocusZoneProps): JSX.Element;

interface IStackProps {
  horizontal?: boolean;
  horizontalAlign?: Alignment;
  verticalAlign?: Alignment;
  verticalFill?: boolean;
  wrap?: boolean;
  tokens?: IStackTokens;
  styles?: IStackStyles;
}

Layout Components

Styling & Theming

Comprehensive styling system with themes, design tokens, and CSS-in-JS utilities.

// Core styling functions
function createTheme(theme?: IPartialTheme): ITheme;
function loadTheme(theme: IPartialTheme): ITheme;
function getTheme(): ITheme;
function mergeStyles(...styles: (IStyle | undefined)[]): string;
function mergeStyleSets<T>(styleSets: IStyleSet<T>): IProcessedStyleSet<T>;

interface ITheme {
  palette: IPalette;
  fonts: IFontStyles;
  semanticColors: ISemanticColors;
  effects: IEffects;
  spacing: ISpacing;
}

function ThemeProvider(props: ThemeProviderProps): JSX.Element;

Styling & Theming

Picker Components

Advanced picker components for selecting people, tags, and other items with search functionality and suggestions.

// People picker components
function NormalPeoplePicker(props: IPeoplePickerProps): JSX.Element;
function CompactPeoplePicker(props: IPeoplePickerProps): JSX.Element;
function ListPeoplePicker(props: IPeoplePickerProps): JSX.Element;
function ExtendedPeoplePicker(props: IExtendedPeoplePickerProps): JSX.Element;
function FloatingPeoplePicker(props: IBaseFloatingPickerProps<IPersonaProps>): JSX.Element;

// Tag picker
function TagPicker(props: ITagPickerProps): JSX.Element;

interface IPeoplePickerProps {
  onResolveSuggestions: (filterText: string, currentPersonas?: IPersonaProps[], limitResults?: number) => IPersonaProps[] | Promise<IPersonaProps[]>;
  selectedItems?: IPersonaProps[];
  onChange?: (items?: IPersonaProps[]) => void;
  itemLimit?: number;
  disabled?: boolean;
  inputProps?: IInputProps;
}

interface ITagPickerProps {
  onResolveSuggestions: (filterText: string, tagList?: ITag[]) => ITag[] | Promise<ITag[]>;
  selectedItems?: ITag[];
  onChange?: (items?: ITag[]) => void;
  itemLimit?: number;
  disabled?: boolean;
}

Picker Components

Utilities & Helpers

Utility functions for DOM manipulation, focus management, performance optimization, and common operations.

// Core utilities
function css(...args: (string | false | null | undefined)[]): string;
function getId(prefix?: string): string;
function memoizeFunction<T extends (...args: any[]) => any>(fn: T): T;
function focusFirstChild(rootElement: HTMLElement): boolean;
function getRect(element: HTMLElement): IRectangle;

// Selection utilities
class Selection implements ISelection {
  getSelectedCount(): number;
  getSelection(): any[];
  isIndexSelected(index: number): boolean;
  setIndexSelected(index: number, isSelected: boolean, shouldAnchor?: boolean): void;
  selectToIndex(index: number, clearSelection?: boolean): void;
}

Utilities & Helpers

Core Types

// Theme system
interface ITheme {
  palette: IPalette;
  fonts: IFontStyles;
  semanticColors: ISemanticColors;
  effects: IEffects;
  spacing: ISpacing;
}

interface IPalette {
  themePrimary: string;
  themeLighterAlt: string;
  themeLighter: string;
  themeLight: string;
  themeTertiary: string;
  themeSecondary: string;
  themeDarkAlt: string;
  themeDark: string;
  themeDarker: string;
  neutralLighterAlt: string;
  neutralLighter: string;
  neutralLight: string;
  neutralQuaternaryAlt: string;
  neutralQuaternary: string;
  neutralTertiaryAlt: string;
  neutralTertiary: string;
  neutralSecondary: string;
  neutralPrimaryAlt: string;
  neutralPrimary: string;
  neutralDark: string;
  black: string;
  white: string;
}

// Component styling
interface IStyleFunction<TViewProps, TTokens> {
  (props: TViewProps & { theme: ITheme; tokens?: TTokens }): Partial<IStyle>;
}

interface IComponentStyles<TViewProps, TTokens, TStyleSet extends IStyleSet<TStyleSet>> {
  (props: TViewProps, theme: ITheme, tokens?: TTokens): TStyleSet;
}

// Common props
interface IComponentAsProps<T> {
  as?: T;
}

interface IRefObject<T> {
  current: T | null;
}

// Selection
interface ISelection {
  canSelectItem?: (item: any, index?: number) => boolean;
  getKey?: (item: any, index?: number) => string;
  getSelectedCount(): number;
  getSelection(): any[];
  isIndexSelected(index: number): boolean;
  isAllSelected(): boolean;
  setAllSelected(isAllSelected: boolean): void;
  setIndexSelected(index: number, isSelected: boolean, shouldAnchor?: boolean): void;
  selectToIndex(index: number, clearSelection?: boolean): void;
  toggleIndexSelected(index: number): void;
  toggleAllSelected(): void;
  toggleRangeSelected(fromIndex: number, count: number): void;
}

// Common enums
enum SelectionMode {
  none = 0,
  single = 1,
  multiple = 2,
}

enum DirectionalHint {
  topLeftEdge = 0,
  topCenter = 1,
  topRightEdge = 2,
  topAutoEdge = 3,
  bottomLeftEdge = 4,
  bottomCenter = 5,
  bottomRightEdge = 6,
  bottomAutoEdge = 7,
  leftTopEdge = 8,
  leftCenter = 9,
  leftBottomEdge = 10,
  rightTopEdge = 11,
  rightCenter = 12,
  rightBottomEdge = 13,
}