Migrate from @fluentui/react (v8) to @fluentui/react-components (v9)

[pamelafox]

Overview

The frontend currently uses both Fluent UI packages:

• @fluentui/react (v8) - 20 import locations
• @fluentui/react-components (v9) - 6 import locations

We should consider migrating fully to v9 (@fluentui/react-components) for several reasons:

1. Official React 19 support - v9 has proper peer dependencies for React 19, while v8 hasn't updated its declared peer deps yet
2. Active development - v9 is the actively maintained version with new features
3. Modern patterns - v9 uses more modern React patterns and CSS-in-JS via Griffel
4. Reduced bundle size - Using only one Fluent UI package would reduce duplication

Current v8 usage

Components imported from @fluentui/react:

Component	Files using it
Stack	Answer, AnswerError, AnswerLoading, HelpCallout, QuestionInput, Settings, ThoughtProcess, VectorSettings
Dropdown	LanguagePicker, Settings, VectorSettings
TextField	QuestionInput, Settings
Checkbox	Settings, VectorSettings
Panel	Chat, HistoryPanel
DefaultButton	Chat, HelpCallout, HistoryItem, LoginButton
IconButton	Answer, HelpCallout, MarkdownViewer, SpeechOutputAzure, SpeechOutputBrowser
PrimaryButton	AnswerError
Callout	HelpCallout, UploadFile
Label	TokenClaimsDisplay, UploadFile
Text	UploadFile
Pivot, PivotItem	AnalysisPanel
Spinner	HistoryPanel, MarkdownViewer
MessageBar	MarkdownViewer
Link	MarkdownViewer
initializeIcons	index.tsx

Migration considerations

Breaking changes

• No Stack component - v9 expects direct use of CSS flexbox/grid
• Different props - Component APIs differ between v8 and v9
• Different styling - v9 uses makeStyles from Griffel instead of IStyleProps
• Different theming - Provider-based theming vs. global

v9 equivalents

v8 Component	v9 Equivalent
Stack	Use CSS flexbox/grid directly
Dropdown	Dropdown or Combobox
TextField	Input or Textarea
Checkbox	Checkbox
Panel	Drawer
DefaultButton	Button
IconButton	Button with icon prop
PrimaryButton	Button appearance="primary"
Callout	Popover
Pivot	TabList
Spinner	Spinner
MessageBar	MessageBar
initializeIcons	Not needed (icons bundled differently)

Suggested approach

1. Migrate one component at a time, starting with simpler ones
2. Update styling to use Griffel's makeStyles
3. Replace Stack with semantic HTML + CSS
4. Run e2e tests after each component migration
5. Remove @fluentui/react dep and legacy-peer-deps setting once complete

References

• Fluent UI v9 documentation
• v8 to v9 migration guide
• React 19 support issue

[bf-2026]

The themeing of fluentui will probably help a lot of people out there implement different frontends much easier. Thumbs up!

[chuwik]

Addressed in #2983

[JiwaniZakir]

The heaviest lift here will be replacing Stack — it's used across 8 components and v9 has no direct equivalent, meaning each usage site needs to be converted to flexbox via makeStyles or inline styles. The Pivot/PivotItem → TabList/Tab swap in AnalysisPanel and the Panel → Drawer migration in Chat and HistoryPanel also involve non-trivial prop and event handler differences. One practical risk: v9's Dropdown was renamed to Combobox/Select depending on use case, so the three files using it (LanguagePicker, Settings, VectorSettings) will need their selection semantics checked before choosing the right replacement. Removing initializeIcons from index.tsx is also a hard requirement since v9 uses a different icon system (@fluentui/react-icons as individual imports), so any icon references scattered across components will need auditing alongside the component swaps.