BlazorFabric
A port of Microsoft's Fluent UI React components and styles to Blazor for building web applications with a consistent Microsoft design language.
What is BlazorFabric?
BlazorFluentUI is a library that ports Microsoft's Fluent UI React component system and styling to Blazor, enabling developers to create web applications with the same design language used in Microsoft products. It provides a comprehensive set of UI components that mirror the functionality and appearance of the original Fluent UI React library, allowing for the development of professional, visually consistent applications within the Blazor ecosystem. The project is now in maintenance mode, meaning no new features will be added and bug fixes will be minimal, but it remains usable in its current form.
Blazor developers building web applications that require the Microsoft Fluent UI design language and component behavior, particularly those migrating from or familiar with Fluent UI React. It suits teams needing a consistent, professional UI for enterprise or Microsoft-aligned products.
Developers choose BlazorFluentUI for its close replication of the Fluent UI React experience within Blazor, offering a seamless transition with comprehensive theming support, performance optimizations, and compatibility with both Blazor WebAssembly and Server. Its unique selling point is providing a full port of Fluent UI React components and styles to Blazor, ensuring visual and functional consistency with Microsoft's design principles.
Overview
Port of FluentUI/Office Fabric React components and style to Blazor
Use Cases
Best For
- Building Blazor applications that require the exact look and feel of Microsoft's Fluent UI design system.
- Migrating existing Fluent UI React projects to Blazor while maintaining component parity and styling.
- Developing enterprise web applications with professional, consistent UIs aligned with Microsoft product aesthetics.
- Creating Blazor applications that need customizable theming to match branding or Microsoft design defaults.
- Implementing complex UI components like DetailsList, Dropdown, and TextField in Blazor with optimized rendering.
- Projects that prioritize embedded Fluent UI System Icons and JavaScript isolation for cleaner integration.
Not Ideal For
- New projects requiring long-term active development and feature updates
- Teams needing the latest Fluent UI design aligned with Windows 11 aesthetics
- Developers who rely on a vibrant community for bug fixes and support
- Scenarios where using the official Microsoft Fluent UI Blazor wrapper is preferred for future compatibility
Pros & Cons
Pros
Full replication of Fluent UI React components like DetailsList and Dropdown, ensuring parity with Microsoft's design system as highlighted in the README.
Supports both Blazor WebAssembly and Server models, providing deployment flexibility as per the installation guides.
Includes Fluent UI System Icons with options for filled variants and sizes, reducing external dependencies as noted in the V5.7 update.
Features like improved DetailsList rendering speed and JavaScript isolation for cleaner integration, as mentioned in revision history.
Cons
No new functionality and minimal bug fixes, as announced in the README, making it unsuitable for projects needing ongoing updates.
Cannot keep up with changes in Fluent UI React, so it may not reflect the latest Microsoft design updates, unlike the new Blazor wrapper.
Past versions like V5.0 had significant breaking changes requiring code updates, adding maintenance overhead for existing users.
Frequently Asked Questions
Related Projects
Blazor HeroClean Architecture Template for Blazor WebAssembly Built with MudBlazor Components.
Stl.FusionBuild real-time apps (Blazor included) with less than 1% of extra code responsible for real-time updates. Host 10-1000x faster APIs relying on transparent and nearly 100% consistent caching. We call it DREAM, or Distributed REActive Memoization, and it's here to turn real-time on!
BoleroBolero brings Blazor to F# developers with an easy to use Model-View-Update architecture, HTML combinators, hot reloaded templates, type-safe endpoints, advanced routing and remoting capabilities, and more.
Flight FinderSamples for ASP.NET Core
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.