Fluent 2 React Prototyping

Build beautiful, accessible UIs using Microsoft's Fluent 2 design system with React.

Setup

Install the package:

bash

npm install @fluentui/react-components
# or
yarn add @fluentui/react-components

App Root Setup

Always wrap your app with FluentProvider:

tsx

import { FluentProvider, webLightTheme } from "@fluentui/react-components";

export default function App() {
  return (
    <FluentProvider theme={webLightTheme}>
      {/* Your app content */}
    </FluentProvider>
  );
}

Available themes: webLightTheme, webDarkTheme, teamsLightTheme, teamsDarkTheme

Component Import Pattern

Import components from @fluentui/react-components:

tsx

import {
  Button,
  Input,
  Card,
  Dialog,
  // ... other components
} from "@fluentui/react-components";

Component Reference

📚 Full component documentation: references/components/_index.md

Quick Links by Category

Setup & Styling

•FluentProvider - Theme provider
•Styling & Theming - makeStyles, tokens
•Icons - Fluent System Icons

Buttons

•Button | CompoundButton | ToggleButton | SplitButton | MenuButton

Form Inputs

•Input | Textarea | Field | SearchBox | SpinButton
•Checkbox | Switch | RadioGroup | Slider

Selection

•Dropdown | Combobox | Select
•TagPicker | SwatchPicker | ColorPicker

Layout & Containers

•Card | Accordion | Divider
•Dialog | Drawer | Popover

Navigation

•Tablist | Menu | Breadcrumb
•NavDrawer | Link | Tree

Data Display

Feedback & Status

•Spinner | ProgressBar | Skeleton
•MessageBar | Toast | Rating

Advanced

Core Components Quick Reference

Buttons

tsx

<Button appearance="primary">Primary</Button>
<Button appearance="secondary">Secondary</Button>
<Button appearance="outline">Outline</Button>
<Button appearance="subtle">Subtle</Button>
<Button appearance="transparent">Transparent</Button>
<Button icon={<Icon />}>With Icon</Button>

Form Inputs

tsx

<Field label="Name">
  <Input placeholder="Enter name" />
</Field>

<Field label="Description">
  <Textarea placeholder="Enter description" />
</Field>

<Field label="Choice">
  <Dropdown placeholder="Select option">
    <Option>Option 1</Option>
    <Option>Option 2</Option>
  </Dropdown>
</Field>

<Checkbox label="Accept terms" />
<Switch label="Enable feature" />
<RadioGroup>
  <Radio value="a" label="Option A" />
  <Radio value="b" label="Option B" />
</RadioGroup>

Layout & Containers

tsx

<Card>
  <CardHeader header={<Text weight="semibold">Title</Text>} />
  <CardPreview>Preview content</CardPreview>
  <p>Card body content</p>
</Card>

<Dialog>
  <DialogTrigger><Button>Open</Button></DialogTrigger>
  <DialogSurface>
    <DialogTitle>Title</DialogTitle>
    <DialogContent>Content here</DialogContent>
    <DialogActions>
      <Button appearance="primary">Confirm</Button>
    </DialogActions>
  </DialogSurface>
</Dialog>

<Drawer open={isOpen} onOpenChange={(_, { open }) => setIsOpen(open)}>
  <DrawerHeader><DrawerHeaderTitle>Title</DrawerHeaderTitle></DrawerHeader>
  <DrawerBody>Content</DrawerBody>
</Drawer>

Navigation

tsx

<Tablist selectedValue={tab} onTabSelect={(_, d) => setTab(d.value)}>
  <Tab value="tab1">Tab 1</Tab>
  <Tab value="tab2">Tab 2</Tab>
</Tablist>

<Menu>
  <MenuTrigger><Button>Menu</Button></MenuTrigger>
  <MenuPopover>
    <MenuList>
      <MenuItem>Item 1</MenuItem>
      <MenuItem>Item 2</MenuItem>
      <MenuDivider />
      <MenuItem>Item 3</MenuItem>
    </MenuList>
  </MenuPopover>
</Menu>

<Breadcrumb>
  <BreadcrumbItem><BreadcrumbButton>Home</BreadcrumbButton></BreadcrumbItem>
  <BreadcrumbDivider />
  <BreadcrumbItem><BreadcrumbButton current>Page</BreadcrumbButton></BreadcrumbItem>
</Breadcrumb>

Feedback & Status

tsx

<Spinner label="Loading..." />
<ProgressBar value={0.5} />
<Badge appearance="filled">New</Badge>
<MessageBar intent="success">Operation completed</MessageBar>
<Toast>Toast notification</Toast>
<Tooltip content="Helpful tip" relationship="label"><Button>Hover me</Button></Tooltip>

Data Display

tsx

<Avatar name="John Doe" />
<AvatarGroup><Avatar /><Avatar /></AvatarGroup>
<Persona name="Jane Smith" secondaryText="Designer" avatar={{ color: "colorful" }} />
<Tag>Category</Tag>

<Tree>
  <TreeItem itemType="branch">
    <TreeItemLayout>Parent</TreeItemLayout>
    <Tree><TreeItem itemType="leaf"><TreeItemLayout>Child</TreeItemLayout></TreeItem></Tree>
  </TreeItem>
</Tree>

<Accordion>
  <AccordionItem value="1">
    <AccordionHeader>Section 1</AccordionHeader>
    <AccordionPanel>Content 1</AccordionPanel>
  </AccordionItem>
</Accordion>

Styling with Griffel

Use makeStyles for custom styles:

tsx

import { makeStyles, tokens } from "@fluentui/react-components";

const useStyles = makeStyles({
  container: {
    padding: tokens.spacingVerticalM,
    backgroundColor: tokens.colorNeutralBackground1,
    borderRadius: tokens.borderRadiusMedium,
  },
});

function MyComponent() {
  const styles = useStyles();
  return <div className={styles.container}>Content</div>;
}

Common tokens:

•Spacing: tokens.spacingVerticalS, tokens.spacingHorizontalM, etc.
•Colors: tokens.colorNeutralBackground1, tokens.colorBrandBackground, etc.
•Typography: tokens.fontSizeBase300, tokens.fontWeightSemibold, etc.
•Border: tokens.borderRadiusMedium, tokens.strokeWidthThin, etc.

fluent2-react