Fluent UI Integration Patterns
Fluent UI Integration Patterns
Overview
Fluent UI extends far beyond standalone React applications. Microsoft's design system is engineered to provide a consistent experience across the entire M365 ecosystem: from Azure AD B2C authentication pages that users encounter before entering an app, through Office Add-in task panes embedded in Excel, Word, and Outlook, to SharePoint Framework web parts running inside SharePoint Online. This skill covers the patterns, constraints, and best practices for integrating Fluent UI into each of these contexts.
Key integration surfaces covered:
- Azure AD B2C — Custom HTML templates with Fluent design tokens for branded sign-in, sign-up, and password reset flows
- Office Add-ins — Fluent React components inside task panes, content panes, and dialog boxes within Excel, Word, Outlook, and PowerPoint
- SharePoint / M365 — SPFx web parts using Fluent v9, theme token bridging from SharePoint themes, and embedded Fluent apps
- Navigation patterns — Nav, Drawer, and NavDrawer patterns for building app shells with responsive sidebar navigation
Azure AD B2C UI Customization
Azure AD B2C user flows and custom policies render HTML pages for authentication steps: sign-in, sign-up, profile editing, and password reset. You can fully customize the HTML/CSS of these pages to match your Fluent-based application, providing users with a seamless visual transition from authentication into the app.