Scaffold a V9 Component

Create a new v9 component named $ARGUMENTS using the repo's Nx generators.

Steps

Adding a component to an existing package

Use the react-component generator:

yarn nx g @fluentui/workspace-plugin:react-component --name $ARGUMENTS --project <project-name>

Where <project-name> is the Nx project (e.g., react-button). This generates all required files: component, types, hook, styles, render, index barrel, and conformance test.

Creating a new package + component

Use the react-library generator first, then add the component:

# Create the package (will prompt for owner team)
yarn create-package

# Or non-interactively:
yarn nx g @fluentui/workspace-plugin:react-library --name <package-name> --owner "<team>"

# Then add the component inside it:
yarn nx g @fluentui/workspace-plugin:react-component --name $ARGUMENTS --project <package-name>

After scaffolding

1. Review generated files against [docs/architecture/component-patterns.md](../../../docs/architecture/component-patterns.md) and fill in component-specific logic.

1. Add styles in use${ARGUMENTS}Styles.styles.ts using design tokens:

``tsx import { makeStyles } from '@griffel/react'; import { tokens } from '@fluentui/react-theme'; ``

1. Create a default story at the appropriate stories package location if not generated.

1. Update API docs after adding exports:

``bash yarn nx run <project>:generate-api ``

Critical Rules

• Always use ForwardRefComponent with React.forwardRef — never React.FC
• Always use design tokens from @fluentui/react-theme — never hardcoded colors/spacing/typography
• Always preserve user className as the LAST argument in mergeClasses()
• Use unstable suffix on exported hooks: use$ARGUMENTSunstable, use${ARGUMENTS}Stylesunstable, render${ARGUMENTS}unstable
• Guard any window/document/navigator access with canUseDOM() from @fluentui/react-utilities
• Do not add dependencies on other Tier 3 component packages (see [docs/architecture/layers.md](../../../docs/architecture/layers.md))

Available Generators Reference