Fluent UI
PowerPortalsPro is built on Microsoft's Fluent UI design system. The Blazor stack uses Fluent UI Blazor, and the React stack uses Fluent UI React (@fluentui/react-components). PowerPortalsPro components are built on these libraries under the hood, so familiarity with the one for your stack helps you get the most out of the framework.
About the Libraries
Both are official Microsoft open-source projects implementing the Fluent 2 Design System:
- Fluent UI Blazor (
Microsoft.FluentUI.AspNetCore.Components) — 70+ Blazor components (buttons, forms, data grids, navigation, dialogs, and more) supporting both Blazor Server and WebAssembly hosting models. - Fluent UI React (
@fluentui/react-components, also known as Fluent UI v9) — the React component library that powers the React template, sharing the same design language and token system.
Key Components Used by PowerPortalsPro
The full component libraries are available in your portal. On the Blazor stack you will commonly encounter:
- FluentDataGrid — Used by the SubGrid component for displaying tabular data with sorting, filtering, and pagination
- FluentTextField / FluentSelect / FluentCheckbox — Form inputs used by the editor components
- FluentDialog — Used by the dialog service for modal forms and confirmations
- FluentNavMenu / FluentNavLink — Site navigation components
- FluentTabs — Used in the documentation site for code examples and tabbed content
- FluentMessageBar — Inline notifications and alerts
- FluentToastProvider — Toast notifications
- FluentDesignTheme — Theme management with light/dark mode and accent color support
On the React stack, the equivalents come from @fluentui/react-components:
- Input / Dropdown / Combobox / Checkbox — Form primitives the React editor components build on
- Dialog — Modal forms and confirmations, surfaced through the React dialog service
- Nav (from
@fluentui/react-nav) — Site navigation - TabList — Tabbed content, including the code examples on this site
- MessageBar — Inline notifications and alerts
- Toaster — Toast notifications
- FluentProvider — Applies the design-token theme (light / dark + accent) to the entire app
Theming
Both Fluent UI libraries share an adaptive design-token system. In Blazor, PowerPortalsPro exposes it through the ThemeProvider and SiteSettingsButton components; in React, through PowerPortalsProThemeProvider (which wraps Fluent's FluentProvider) and the React SiteSettingsButton. Both let users switch between light and dark modes, change accent colors, and toggle right-to-left text direction, with all styling driven by design tokens so your portal adapts automatically when the theme changes.
Tip
When writing custom styles, prefer Fluent design tokens over hardcoded colors —
var(--accent-fill-rest)/var(--neutral-foreground-rest)in Blazor, or thetokens.*values (e.g.tokens.colorBrandBackground) from@fluentui/react-componentsin React. This keeps your styles consistent across light and dark themes.
Accessibility
Both Fluent UI libraries include built-in WCAG 2.1 compliance, keyboard navigation, and screen reader support. By building on these foundations, PowerPortalsPro portals inherit these accessibility features automatically on either stack.
Resources
Fluent UI Blazor
Fluent UI React
Shared design system: Fluent 2 Design System