Fluent UI Blazor
PowerPortalsPro is built on top of the controls and design system of the Fluent UI Blazor library. All PowerPortalsPro components use Fluent UI components under the hood, so understanding the Fluent UI library will help you get the most out of the framework.
About the Library
The Fluent UI Blazor library (Microsoft.FluentUI.AspNetCore.Components) is an official Microsoft open-source project that provides a comprehensive set of Blazor components implementing Microsoft's Fluent Design System. It includes over 70 components such as buttons, forms, data grids, navigation, dialogs, and more, and supports both Blazor Server and WebAssembly hosting models.
Key Components Used by PowerPortalsPro
While the full Fluent UI Blazor component library is available for use in your portal, here are some of the components you will commonly encounter when working with PowerPortalsPro:
- 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
Theming
Fluent UI Blazor uses an adaptive design token system for theming. PowerPortalsPro exposes this through the ThemeProvider and SiteSettingsButton components, which allow users to switch between light and dark modes, change accent colors, and toggle right-to-left text direction. All styling is driven by CSS custom properties (design tokens), so your portal automatically adapts when the theme changes.
Tip
When writing custom styles, prefer using Fluent design tokens (e.g.
var(--accent-fill-rest),var(--neutral-foreground-rest)) over hardcoded colors. This ensures your styles stay consistent across light and dark themes.
Accessibility
Fluent UI Blazor includes built-in WCAG 2.1 compliance, keyboard navigation, and screen reader support. By building on this foundation, PowerPortalsPro portals inherit these accessibility features automatically.