Fluent UI React Components

https://storybooks.fluentui.dev/react
Admin
Fluent UI React Components is a collection of reusable UI components for building web applications...
Tokens:98,273
Snippets:1,440
Trust Score:7.4
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install Motion Components Preview Package

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fmotion-components-preview-introduction--docs

Install the beta package for motion components. Note that APIs may change before the stable release.

```bash
npm install @fluentui/react-motion-components-preview
```

--------------------------------

### Toolbar Sizes

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-toolbar--docs

Examples demonstrating different toolbar sizes which affect padding.

```tsx
Small
```

```tsx
Medium
```

```tsx
Large
```

--------------------------------

### Install Fluent UI Dependency

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fconcepts-developer-quick-start--docs

Fluent UI should be installed as a dependency of your application. This command adds it to your project's package.json.

```bash
npm install @fluentui/react-components
```

--------------------------------

### Component Examples

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-field--docs

Demonstrates the use of Field with various input components like ProgressBar.

```text
    It can also be used to add a label or error text to components like ProgressBar.
```

--------------------------------

### PresenceGroup Default Example

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fmotion-apis-presencegroup--docs

Demonstrates the default usage of the PresenceGroup component, showing how to add and remove users.

```javascript
Add user
Remove user

AM
Allan Munger
Available

AB
Amanda Brady
Available

AM
Ashley McCarthy
Available
```

--------------------------------

### Custom Initials Configuration

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-avatar--docs

Example showing the use of the initials prop for custom text display.

```markdown
    the `name` prop instead, as that will automatically determine the initials and display them.
```

--------------------------------

### Example makeStyles Usage

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fconcepts-developer-build-time-styles--docs

A standard implementation of makeStyles to create a styling hook for components.

```typescript
import { makeStyles } from '@griffel/react';

const useStyles = makeStyles({
  root: {
    color: 'red',
  },
});

const Component = () => {
  const styles = useStyles();
  return <div className={styles.root} />;
};
```

--------------------------------

### Compiled Output Example

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fconcepts-developer-build-time-styles--docs

The resulting code after build-time compilation, replacing makeStyles with a lightweight function.

```javascript
import { __styles } from '@griffel/react';

const useStyles = __styles(
  { root: { sj: 'f1e0r62' } },
  { d: { f1e0r62: 'color:red' } }
);

const Component = () => {
  const styles = useStyles();
  return <div className={styles.root} />;
};
```

--------------------------------

### Basic Slide Implementation

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fmotion-components-preview-slide--docs

A simple example showing how to use the Slide component to wrap content with visibility control.

```typescript
import { Slide } from '@fluentui/react-motion-components-preview';

function Component({ visible }) {
  return (
    <Slide visible={visible}>
      <div>Content</div>
    </Slide>
  );
}
```

--------------------------------

### Setup FluentProvider for React 18

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fconcepts-developer-quick-start--docs

Place a `<FluentProvider />` at the root of your React 18 app and pass a theme to enable CSS-in-JS styling for Fluent UI components.

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

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

--------------------------------

### Fade Atom Example

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fmotion-components-preview-atoms--docs

Demonstrates how to use the `fadeAtom` to create an opacity transition. Specify direction, duration, and opacity values.

```typescript
fadeAtom({
  direction: 'enter',
  duration: 600,
  outOpacity: 0,
  inOpacity: 1,
})
```

--------------------------------

### Style Evaluation Scenario

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fconcepts-developer-build-time-styles--docs

Example demonstrating styles that depend on external constants and helper modules.

```typescript
// constants.ts
export const color = 'red';

// common.ts
export const spacing = '10px';

// styles.ts
import { makeStyles } from '@griffel/react';
import { color } from './constants';
import { spacing } from './common';

export const useStyles = makeStyles({
  root: {
    color,
    padding: spacing,
  },
});
```

--------------------------------

### Create a Custom LoadingButton Component

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fconcepts-developer-building-custom-controls--docs

This example shows how to create a custom 'LoadingButton' by extending the base Button component. It includes custom state for loading, conditional rendering of a loading indicator, and custom styling.

```typescript
import * as React from 'react';
import { assertSlots, mergeClasses, slot, type Slot } from '@fluentui/react-components';
import { useButtonBase_unstable } from '@fluentui/react-button';
import type { ButtonBaseProps, ButtonBaseState } from '@fluentui/react-button';

// --- Types ---
// Extend base slot and state types with your custom additions.

type LoadingButtonSlots = {
  root: NonNullable<ButtonBaseState['root']>;
  icon?: ButtonBaseState['icon'];
  loadingIndicator?: Slot<'span'>;
};

type LoadingButtonProps = ButtonBaseProps & {
  isLoading?: boolean;
  loadingIndicator?: Slot<'span'>;
};

type LoadingButtonState = ButtonBaseState & {
  isLoading: boolean;
  loadingIndicator?: ReturnType<typeof slot.optional>;
  components: LoadingButtonSlots;
};

// --- State hook ---
// Delegate ARIA, keyboard, and semantic behavior to the base hook.
// Add your component-specific state on top.

const useLoadingButtonState = (
  props: LoadingButtonProps,
  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,
): LoadingButtonState => {
  const { isLoading = false, loadingIndicator, ...baseProps } = props;
  const baseState = useButtonBase_unstable(baseProps, ref);

  return {
    ...baseState,
    isLoading,
    // slot.optional resolves the slot prop: uses the caller's value if provided,
    // otherwise renders the defaultProps content. Returns undefined if renderByDefault is false.
    loadingIndicator: slot.optional(loadingIndicator, {
      renderByDefault: true,
      defaultProps: {
        children: 'Loading...',
        'aria-live': 'polite',
      },
      elementType: 'span',
    }),
    components: {
      ...baseState.components,
      loadingIndicator: 'span',
    },
  };
};

// --- Styles hook ---
// Apply class names using mergeClasses. Always append the existing slot className last
// so that consumer class names take precedence over your internal ones.

const useLoadingButtonStyles = (state: LoadingButtonState): void => {
  state.root.className = mergeClasses(
    'loadingButton',
    state.isLoading && 'loadingButton--busy',
    state.root.className, // consumer class names win
  );

  if (state.loadingIndicator) {
    state.loadingIndicator.className = mergeClasses('loadingButton__indicator', state.loadingIndicator.className);
  }
};

// --- Render function ---
// Controls what gets rendered and when. Use assertSlots to get type-safe slot
// components (state.root, state.icon, etc.) and render them as JSX elements.

const renderLoadingButton = (state: LoadingButtonState) => {
  assertSlots<LoadingButtonSlots>(state);

  return (
    <state.root>
      {state.isLoading ? (
        state.loadingIndicator && <state.loadingIndicator />
      ) : (
        <>
          {state.icon && <state.icon />}
          {state.root.children}
        </>
      )}
    </state.root>
  );
};

// --- Component ---

export const LoadingButton = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, LoadingButtonProps>(
  (props, ref) => {
    const state = useLoadingButtonState(props, ref);
    useLoadingButtonStyles(state);
    return renderLoadingButton(state);
  },
);

```

--------------------------------

### Create Presence Motion Slot

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fmotion-apis-presencemotionslot--docs

This example demonstrates how a component author creates a presence motion slot from scratch using `presenceMotionSlot()`. It involves creating a default motion, defining slot types, wiring the slot in the state hook, and rendering the slot.

```typescript
import * as React from 'react';
import { Slot, createPresenceComponent, useSlot } from '@fluentui/react-components';
import { assertSlots } from '@fluentui/react-utilities';

// 1. Create a default motion
const DefaultMotion = createPresenceComponent({
  enter: {
    // Define enter animation properties
    opacity: [0, 1],
    scale: [0.9, 1],
  },
  exit: {
    // Define exit animation properties
    opacity: [1, 0],
    scale: [1, 0.9],
  },
});

// 2. Define slot types
interface MyComponentSlots {
  surfaceMotion: Slot<PresenceMotionSlotProps>;
}

// 3. Wire the slot
function useMyComponentState() {
  const state = useSlot<MyComponentSlots>();

  // Use presenceMotionSlot to manage the motion slot
  state.surfaceMotion = presenceMotionSlot({
    elementType: DefaultMotion,
    defaultProps: {
      visible: true, // Control visibility
      unmountOnExit: true, // Unmount when animation finishes
    },
    // Other props can be passed here, e.g., 'appear'
  });

  return state;
}

// 4. Render the slot
function MyComponent(props) {
  const state = useMyComponentState();
  assertSlots<MyComponentSlots>(state);

  return (
    <state.surfaceMotion>
      {/* Content to be animated */}
      <div>Animated Content</div>
    </state.surfaceMotion>
  );
}

```

--------------------------------

### Button State Hook

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fconcepts-developer-customizing-components-with-slots--docs

Example of the useButton hook taking props and returning state.

```typescript
const useButton = (props: ButtonProps, ref: React.Ref<HTMLButtonElement>): ButtonState => {
  // ...
};
```

--------------------------------

### Import makeStyles Hook

Source: https://storybooks.fluentui.dev/react/iframe.html?globals=&id=concepts-developer-styling-components--docs

Import the makeStyles hook from the Griffel library to start styling components. This is the primary entry point for defining component styles.

```typescript
import { makeStyles } from "@griffel/react";
```

--------------------------------

### Import makeStyles hook

Source: https://storybooks.fluentui.dev/react?path=%2Fstory%2Fconcepts-developer-styling-components--docs

Import the makeStyles hook from the '@fluentui/react-make-styles' package to start styling components.

```javascript
import { makeStyles } from '@fluentui/react-make-styles';
```

--------------------------------

### Empty Swatch Example

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-swatchpicker--docs

Provides an empty swatch slot, typically used for adding new items.

```tsx
<SwatchPicker>
  <Swatch value="empty" />
</SwatchPicker>
```

--------------------------------

### Create One-Way Motion Component

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fmotion-introduction--docs

Use `createMotionComponent` to define animations that play once on mount. This example creates a slide-in effect with opacity change.

```typescript
const SlideIn = createMotionComponent({
  keyframes: [
    { transform: 'translateX(-50px)', opacity: 0 },
    { transform: 'translateX(0)', opacity: 1 },
  ],
  duration: motionTokens.durationUltraSlow,
  easing: motionTokens.curveDecelerateMin,
});
```

--------------------------------

### Consume Base Behavior Directly with useButtonBase_unstable

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fconcepts-developer-building-custom-controls--docs

This example demonstrates consuming a base state hook directly to build custom button behavior. It shows how to extend the base props and state with custom properties like 'variant'.

```typescript
// Layer 1: consume base behavior directly
import { useButtonBase_unstable } from '@fluentui/react-button';
import type { ButtonBaseProps, ButtonBaseState } from '@fluentui/react-button';

// Add your custom props on top of the base props type
type MyButtonProps = ButtonBaseProps & {
  variant?: 'primary' | 'secondary';
};

// Your state hook wraps useButtonBase_unstable and extends the returned state
const useMyButtonState = (props: MyButtonProps, ref: React.Ref<HTMLButtonElement>) => {
  const { variant, ...baseProps } = props;
  const baseState = useButtonBase_unstable(baseProps, ref);
  return { ...baseState, variant };
};

```

--------------------------------

### Disabled SearchBox

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-searchbox--docs

Example of a disabled SearchBox state.

```tsx
import { SearchBox } from '@fluentui/react-search-preview';

export const Disabled = () => <SearchBox disabled />;
```

--------------------------------

### TimePicker with DatePicker

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcompat-components-timepicker--docs

Example showing a TimePicker used in conjunction with a DatePicker.

```tsx
import * as React from 'react';
import { DatePicker, TimePicker } from '@fluentui/react-components';

export const WithDatePicker = () => (
  <>
    <DatePicker placeholder="Select a date" />
    <TimePicker placeholder="Select a time" />
  </>
);
```

--------------------------------

### Button Styles Hook

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fconcepts-developer-customizing-components-with-slots--docs

Example of the useButtonStyles hook mutating state to add classNames.

```typescript
const useButtonStyles = (state: ButtonState): ButtonState => {
  // ...
  return state;
};
```

--------------------------------

### Apply a theme with FluentProvider

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fconcepts-developer-theming--docs

Wrap the application root with FluentProvider and pass the desired theme object to the theme prop.

```jsx
<FluentProvider />
```

--------------------------------

### Switch Label Wrapping

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-switch--docs

Example of a Switch with a long label that wraps to multiple lines.

```tsx
<Switch label="Here is an example of a Switch with a long label and it starts to wrap to a second line." />
```

--------------------------------

### Step Size Configuration

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-spinbutton--docs

Configuring step and stepPage values for incremental adjustments.

```javascript
  set to a large value to allow bulk steps via the `Page Up` and `Page Down` keys.
```

--------------------------------

### Define Non-Nullable RadioButton Indicator

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fconcepts-developer-customizing-components-with-slots--docs

Example of requiring a slot to always be rendered using NonNullable.

```typescript
export type RadioButtonProps = ComponentProps<{
  indicator: NonNullable<Slot<'span'>>;
}>;
```

--------------------------------

### Define Spinner Slots

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fconcepts-developer-customizing-components-with-slots--docs

Example of defining optional slots for a Spinner component using ComponentProps.

```typescript
export type SpinnerProps = ComponentProps<{
  spinner?: Slot<'span'>;
  label?: Slot<'div'>;
}>;
```

--------------------------------

### Display image fit options

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-image--docs

Demonstrates how the fit property controls image resizing within its container.

```text
     filling its container (`cover`) or preserving the aspect ratio (`contain`).
```

--------------------------------

### SearchBox with Content Before and After

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-searchbox--docs

Shows how to inject custom elements like icons or buttons into the SearchBox slots.

```tsx
import { SearchBox } from '@fluentui/react-search-preview';
import { MicRegular, FilterRegular } from '@fluentui/react-icons';

export const ContentBeforeAfter = () => (
  <>
    <SearchBox contentBefore={<FilterRegular />} />
    <SearchBox contentAfter={<MicRegular />} />
  </>
);
```

--------------------------------

### Customize Tree interaction

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-tree--docs

Shows how to listen for onOpenChange to distinguish between content and icon clicks.

```tsx
<Tree onOpenChange={(e, data) => console.log(data.type)}>
  <TreeItem>
    <TreeItemLayout>level 1, item 1</TreeItemLayout>
  </TreeItem>
  <TreeItem>
    <TreeItemLayout>level 1, item 2</TreeItemLayout>
  </TreeItem>
</Tree>
```

--------------------------------

### Configure Dialog Motion

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-dialog--docs

Demonstrates how to use the surfaceMotion and backdropMotion props to customize animation parameters like duration and scale.

```jsx
<Dialog surfaceMotion={{ duration, outScale, easing, animateOpacity }}>
  <DialogSurface backdropMotion={{ duration: backdropDuration }}>…</DialogSurface>
</Dialog>
```

--------------------------------

### Custom Mount Configuration

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-tooltip--docs

Demonstrates providing a custom mountNode for rendering the tooltip portal outside the default location.

```jsx
  A custom `mountNode` can be provided in the case that the tooltip needs to be rendered elsewhere.
```

--------------------------------

### Apply inline styles to TreeItem

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-tree--docs

Example of applying custom inline styles to override default static nesting styles.

```tsx
<Tree>
  <TreeItem style={{ '--fluent-tree-item-padding': '20px' }}>
    <TreeItemLayout>level 1, item 1</TreeItemLayout>
  </TreeItem>
</Tree>
```

--------------------------------

### Input with Content Before and After

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-input--docs

Shows how to add icons or buttons inside the input border using content slots.

```tsx
import { Input, Button, makeStyles, shorthands } from '@fluentui/react-components';
import { PersonRegular, AddRegular } from '@fluentui/react-icons';

const useStyles = makeStyles({
  root: {
    display: 'flex',
    flexDirection: 'column',
    gap: '10px',
    maxWidth: '300px',
  },
});

export const ContentBeforeAfter = () => {
  const styles = useStyles();
  return (
    <div className={styles.root}>
      <Input contentBefore={<PersonRegular />} placeholder="Full name" />
      <Input contentAfter={<Button icon={<AddRegular />} appearance="subtle" />} placeholder="First name" />
      <Input contentBefore="$" contentAfter=".00" placeholder="Amount to pay" />
    </div>
  );
};
```

--------------------------------

### Customizing Avatar Size

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-avatar--docs

Example of overriding the default size by providing a supported size prop and custom CSS dimensions.

```jsx
<Avatar size={40} style={{ width: '45px', height: '45px' }} />
```

--------------------------------

### Using Motion Tokens for CSS and JS Animations

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fmotion-tokens--docs

Demonstrates how to use `tokens` for CSS-based animations and `motionTokens` for JavaScript-based animations. Ensure correct imports are used for each scenario.

```typescript
import { createMotionComponent, makeStyles, motionTokens, tokens } from '@fluentui/react-components';

// 💡 Use `tokens` for defining CSS based animations
const useClasses = makeStyles({
  root: {
    animationDuration: tokens.curveAccelerateMid,
  },
});

// 💡 Use `motionTokens` for defining JS based animations
const Motion = createMotionComponent({
  duration: motionTokens.curveAccelerateMid,
});

```

--------------------------------

### Input Types

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-input--docs

Demonstrates using different HTML input types like email, url, and password.

```tsx
import { Input, makeStyles, shorthands } from '@fluentui/react-components';

const useStyles = makeStyles({
  root: {
    display: 'flex',
    flexDirection: 'column',
    gap: '10px',
    maxWidth: '300px',
  },
});

export const Type = () => {
  const styles = useStyles();
  return (
    <div className={styles.root}>
      <Input type="email" placeholder="Email input" />
      <Input type="url" placeholder="URL input" />
      <Input type="password" placeholder="Password input" />
    </div>
  );
};
```

--------------------------------

### Define Input Component Slots

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fconcepts-developer-customizing-components-with-slots--docs

Example of defining multiple slots for an Input component where the root slot is distinct from primary slots.

```typescript
export type InputProps = ComponentProps<{
  contentBefore?: Slot<'span'>;
  input: Slot<'input'>;
  contentAfter?: Slot<'span'>;
}>;
```

--------------------------------

### Implement Presence Previous Behavior

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-persona--docs

Demonstrates how to override icon and className to match v8 presence behavior, noting that Persona maps to one size smaller.

```typescript
possible to override the icon and className to match it. Note that Persona maps to one size
    smaller, such as `huge` to `large` and `medium` to `small`. As the size prop shows, Persona does not
    support tiny.
```

--------------------------------

### Lifecycle Callbacks for Motion Events

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fmotion-apis-createmotioncomponent--docs

Use onMotionStart, onMotionFinish, and onMotionCancel callbacks to manage side effects and orchestrate motions in your animated components.

```javascript
import { createMotionComponent } from "@fluentui/react-motion";

const MyAnimatedComponent = createMotionComponent(motionComponentConfig);

<MyAnimatedComponent
  onMotionStart={() => console.log('Motion started')}
  onMotionFinish={() => console.log('Motion finished')}
  onMotionCancel={() => console.log('Motion cancelled')}
/>;
```

--------------------------------

### Create Two-Way Presence Component

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fmotion-introduction--docs

Use `createPresenceComponent` for animations that toggle with enter/exit states, controlled by a `visible` prop. This example defines a fade-in and fade-out animation.

```typescript
const Fade = createPresenceComponent({
  enter: {
    keyframes: [{ opacity: 0 }, { opacity: 1 }],
    duration: 500,
  },
  exit: {
    keyframes: [{ opacity: 1 }, { opacity: 0 }],
    duration: 300,
  },
});
```

--------------------------------

### Create a motion slot

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fmotion-apis-motionslot--docs

Demonstrates the four-step pattern for creating a motion slot: defining the motion component, setting slot types, wiring the slot in the state hook, and rendering it.

```typescript
```

```
```

--------------------------------

### Define custom button styles

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fconcepts-developer-advanced-styling-techniques--docs

Example of defining custom styles for a button component, ensuring the original className prop is appended to maintain user-defined style precedence.

```typescript
import { makeStyles, mergeClasses } from '@fluentui/react-components';
import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';

const useStyles = makeStyles({
  root: { color: 'red' },
});

export const useFancyButtonStyles_unstable = (state) => {
  const styles = useStyles();
  state.root.className = mergeClasses(
    state.root.className,
    styles.root,
    getSlotClassNameProp_unstable(state.root)
  );
};
```

--------------------------------

### createPresenceComponent(definitions)

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fmotion-apis-createpresencecomponent--docs

Creates a custom presence component with defined enter and exit motions.

```APIDOC
## createPresenceComponent(definitions)

### Description
A factory function to create custom motion components. The returned component provides `.In` and `.Out` static methods for isolated motion playback.

### Parameters
- **definitions** (Object) - Required - An object containing `enter` and `exit` atoms defined by the `AtomMotion` interface.

### Lifecycle Callbacks
- **onMotionStart** - Called when any motion has started.
- **onMotionFinish** - Called when all motions have finished.
- **onMotionCancel** - Called when the motion is cancelled instead of `onMotionFinish`.

### Props
- **appear** (boolean) - Optional - If true, performs the enter animation on initial mount.
- **visible** (boolean) - Optional - Controls the visibility state.
- **reducedMotion** (Object) - Optional - Custom configuration for reduced motion scenarios.
- **unmountOnExit** (boolean) - Optional - If true, unmounts the component after the animation finishes.
```

--------------------------------

### Avoid Component Type in Accessibility Name

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fconcepts-developer-accessibility-component-labelling--docs

Do not include the component type (e.g., 'button') in the `aria-label` as screen readers announce this automatically. This example shows the difference in narration between a bad and good `aria-label`.

```html
aria-label="Mute microphone **button**"
```

```html
aria-label="Mute microphone"
```

--------------------------------

### SwatchPicker Size Configuration

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-swatchpicker--docs

Demonstrates the use of the size prop to adjust the dimensions of swatches, ranging from extra-small to large.

```tsx
<SwatchPicker size="extra-small" />
<SwatchPicker size="small" />
<SwatchPicker size="medium" />
<SwatchPicker size="large" />
```

--------------------------------

### Configure Babel Preset

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fconcepts-developer-build-time-styles--docs

Add the Griffel preset to your .babelrc.json file for library development.

```json
{
  "presets": ["@griffel/babel-preset"]
}
```

--------------------------------

### Prefer Reusing Visible Text for Labels

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fconcepts-developer-accessibility-component-labelling--docs

When labelling, reuse text that is already visible in the UI. This example shows how to use `aria-labelledby` to associate a button with its visible text and another element, improving accessibility.

```html
<button aria-labelledby="removeButtonId userNameId">Remove Robert Tolbert</button>
<span id="userNameId">Robert Tolbert</span>
<button id="removeButtonId">Remove</button>
```

--------------------------------

### TeachingPopover Structure

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-teachingpopover--docs

Demonstrates the basic structure of a TeachingPopover, including its trigger and surface. This is useful for understanding the core components involved in displaying popovers.

```typescript
TeachingPopoverTeachingPopoverBodyTeachingPopoverCarouselTeachingPopoverCarouselCard
TeachingPopoverCarouselFooterTeachingPopoverCarouselNavTeachingPopoverCarouselNavButtonTeachingPopoverCarouselPageCountTeachingPopoverFooterTeachingPopoverHeaderTeachingPopoverSurfaceTeachingPopoverTitleTeachingPopoverTrigger
```

--------------------------------

### Configure Webpack Loader

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fconcepts-developer-build-time-styles--docs

Add the @griffel/webpack-loader to your Webpack configuration rules.

```javascript
{
  test: /\.(js|ts|tsx)$/,
  use: [
    {
      loader: '@griffel/webpack-loader',
      options: {
        babelOptions: {
          presets: ['@babel/preset-typescript'],
        },
      },
    },
  ],
}
```

--------------------------------

### Avoid State in Accessibility Name

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fconcepts-developer-accessibility-component-labelling--docs

Avoid hard-coding component states (e.g., 'is active') in the `aria-label`. Screen readers will announce the state if the correct ARIA state attribute is used. This example contrasts a bad and good approach for a tab.

```html
aria-label="Files tab **is active**"
```

```html
no aria-label attribute is needed for the "Files" tab
```

--------------------------------

### Create custom themes with factory functions

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fconcepts-developer-theming--docs

Use factory functions to generate themes based on custom brand ramps instead of using predefined themes.

```javascript
createLightTheme()
createDarkTheme()
createTeamsDarkTheme()
createHighContrastTheme()
```

--------------------------------

### Implement FlatTree

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-tree--docs

Demonstrates the structure of a FlatTree using FlatTreeItem with required accessibility properties.

```tsx
<FlatTree aria-label="Flat tree">
  <FlatTreeItem aria-level={1} aria-posinset={1} aria-setsize={1} value="1">
    <TreeItemLayout>Item 1, level 1</TreeItemLayout>
  </FlatTreeItem>
  <FlatTreeItem aria-level={1} aria-posinset={2} aria-setsize={1} value="2">
    <TreeItemLayout>Item 1, level 1</TreeItemLayout>
  </FlatTreeItem>
</FlatTree>
```

--------------------------------

### MessageBar Intents

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-messagebar--docs

Demonstrates the use of preset intents (info, warning, error, success) to style the MessageBar.

```tsx
import { MessageBar, MessageBarBody, MessageBarTitle, MessageBarActions, Button, Link } from '@fluentui/react-components';

const Intents = () => (
  <>
    <MessageBar intent="info">
      <MessageBarBody>
        <MessageBarTitle>Intent info</MessageBarTitle>
        Message providing information to the user with actionable insights. <Link>Link</Link>
      </MessageBarBody>
    </MessageBar>
    <MessageBar intent="warning">
      <MessageBarBody>
        <MessageBarTitle>Intent warning</MessageBarTitle>
        Message providing information to the user with actionable insights. <Link>Link</Link>
      </MessageBarBody>
    </MessageBar>
    <MessageBar intent="error">
      <MessageBarBody>
        <MessageBarTitle>Intent error</MessageBarTitle>
        Message providing information to the user with actionable insights. <Link>Link</Link>
      </MessageBarBody>
    </MessageBar>
    <MessageBar intent="success">
      <MessageBarBody>
        <MessageBarTitle>Intent success</MessageBarTitle>
        Message providing information to the user with actionable insights. <Link>Link</Link>
      </MessageBarBody>
    </MessageBar>
  </>
);
```
Tokens:
Raw