Original Published on PatternFly Medium Publication

If you’re a developer who loves hands-on tactical tutorials, then read on. Today, we’re covering Blorc.PatternFly.
First off, the basics: What is Blorc.PatternFly? Standing for Blazor, Orc, and PatternFly, Blorc.PatternFly is a library with the ultimate goal of wrapping all PatternFly components and making them available as Blazor components.
Now let’s jump into a tutorial. Keep in mind that this tutorial isn’t meant as an overview of Blazor — you’ll need some basic knowledge of Blazor before diving in.
You’ll also need to have these tools handy:
- Visual Studio 2019 (16.4.2)
- Blazor (3.1.0-preview4.19579.2)
Step 1: Creating the project
First, go through the Get started with ASP.NET Core Blazor tutorial for Blazor WebAssembly experience. You’ll create the Blazor project in this tutorial, and you’ll only have to convert the Bootstrap to PatternFly. For the purpose of this guide, use Blorc.PatternFly.QuickStart as the project name.
Follow the on-screen instructions of the Visual Studio project:
Create a new project.

Configure your new project.

Create a new Blazor app with Blazor WebAssembly experience.

The Blazor template is built on top of Bootstrap. So the resulting app looks like this:
![]() |
Index.razor and SurveyPrompt.razor |
![]() |
Counter.razor |
![]() |
FetchData.razor |
Step 2: Startup configuration
Once the project has been created, add Blorc.PatternFly as a package reference via NuGet. At the time of writing this article (which I hope you’re enjoying!), this package is only available as prerelease. To install the latest prerelease version, check the Include prerelease option in the Package Manager.
![]() |
Adding latest prerelease of Blorc.PatternFly package |
Also, it’s mandatory to register the Blorc.Core services in the ConfigureServices method of the Startup class, shown below:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
using Blorc.Services; | |
using Microsoft.AspNetCore.Components.Builder; | |
using Microsoft.Extensions.DependencyInjection; | |
namespace Blorc.PatternFly.QuickStart | |
{ | |
public class Startup | |
{ | |
public void ConfigureServices(IServiceCollection services) | |
{ | |
services.AddBlorcCore(); | |
} | |
public void Configure(IComponentsApplicationBuilder app) | |
{ | |
app.AddComponent<App>("app"); | |
} | |
} | |
} |
Once the Blorc services are registered, it’s time to start replacing the UI elements, starting with the content of the index.html and site.css files.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8" /> | |
<meta name="viewport" content="width=device-width" /> | |
<title>Blorc.PatternFly.QuickStart</title> | |
<base href="/" /> | |
<script src="_content/Blorc.Core/injector.js"></script> | |
<link href="css/site.css" rel="stylesheet" /> | |
</head> | |
<body> | |
<app>Loading...</app> | |
<script src="_framework/blazor.webassembly.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
html, body { | |
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
} | |
app { | |
position: relative; | |
} | |
@media (min-width: 768px) { | |
.pf-c-page__header-brand-toggle { | |
display: none; | |
} | |
} |
To make sure that no unused dependencies are being deployed, remove the bootstrap and open-iconic directories from the wwwroot/css directory.
You can do this yourself by following the steps below or you can clone the repository with the source code of this tutorial.
For instance, the MainLayout component must inherit from PatternFlyLayoutComponentBase, and you can use the Page component as follows:
For the NavMenu, you could use the Navigation component and update the razor file as shown below:
Finally, update the content of the Counter and FetchData pages.
And that’s it! Great work. Your application should now look like the screenshots below:
If you would like support for any new component, contribute to the Blorc.PatternFly library on GitHub. You can get in touch by:
Finally, if you want to see the latest develop branch of Blorc.PatternFly in action, you can browse to the live demo with a full overview of all the PatternFly components already available for Blazor. And you’ll probably agree: PatternFly and Blazor are awesome — and combined, they are a beautiful pair.
Interested in contributing an article to the PatternFly Medium publication? Great! Submit your topic idea, and we’ll be in touch.
Step 3: Updating pages and components
The time has come to update the components. You should be able to update the content of the razor files with references to the available Blorc.PatternFly components.You can do this yourself by following the steps below or you can clone the repository with the source code of this tutorial.
For instance, the MainLayout component must inherit from PatternFlyLayoutComponentBase, and you can use the Page component as follows:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@using Blorc.PatternFly.Layouts | |
@using Blorc.PatternFly.Components.Page | |
@using Blorc.PatternFly.Components.Button | |
@inherits PatternFlyLayoutComponentBase | |
<Page> | |
<LogoContent> | |
Blorc.PatternFly.QuickStart | |
</LogoContent> | |
<ToolbarContent> | |
<Button Component="a" Variant="ButtonVariant.Primary" Href="http://blazor.net"> | |
About | |
</Button> | |
</ToolbarContent> | |
<SidebarContent> | |
<NavMenu /> | |
</SidebarContent> | |
<MainContent> | |
@Body | |
</MainContent> | |
</Page> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@page "/counter" | |
@using Blorc.Components | |
@using Blorc.PatternFly.Components.Button | |
@using Blorc.PatternFly.Components.Text | |
@inherits BlorcComponentBase | |
<TextContent> | |
<Text Component="h1">Counter</Text> | |
</TextContent> | |
<TextContent> | |
<Text Component="blockquote">Current count: @CurrentCount</Text> | |
</TextContent> | |
<br /> | |
<Button Variant="ButtonVariant.Primary" OnClick=@((s,e) => IncrementCount())>Click me</Button> | |
@code { | |
// Blorc.Core comes with it’s own binding system and property bag | |
// implementations. This allows bindings and property change | |
// notifications out of the box | |
public int CurrentCount | |
{ | |
get { return GetPropertyValue<int>(nameof(CurrentCount)); } | |
set { SetPropertyValue(nameof(CurrentCount), value); } | |
} | |
private void IncrementCount() | |
{ | |
CurrentCount++; | |
} | |
protected override void OnPropertyChanged(System.ComponentModel.PropertyChangedEventArgs e) | |
{ | |
if(e.PropertyName == nameof(CurrentCount)) | |
{ | |
StateHasChanged(); | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@page "/fetchdata" | |
@using System.Collections | |
@using Blorc.PatternFly.Components.Text | |
@using Blorc.PatternFly.Components.Table | |
@inject HttpClient Http | |
<TextContent> | |
<Text Component="h1">Weather forecast</Text> | |
<Text Component="blockquote">This component demonstrates fetching data from the server.</Text> | |
</TextContent> | |
<br /> | |
@if (forecasts == null) | |
{ | |
<p><em>Loading...</em></p> | |
} | |
else | |
{ | |
<Table Caption="Action Column" DataSource=@(()=> forecasts as IEnumerable)> | |
<Header> | |
<Row> | |
<Column Label="Date" Key="Date" IsSortable="true" Idx="0" /> | |
<Column Label="Temp. (C)" Key="TemperatureC" IsSortable="true" Idx="1" /> | |
<Column Label="Temp. (F)" Key="TemperatureF" IsSortable="true" Idx="2" /> | |
<Column Label="Summary" Key="Summary" Idx="3" /> | |
</Row> | |
</Header> | |
</Table> | |
} | |
@code { | |
private WeatherForecast[] forecasts; | |
protected override async Task OnInitializedAsync() | |
{ | |
forecasts = await Http.GetJsonAsync<WeatherForecast[]>("sample-data/weather.json"); | |
} | |
public class WeatherForecast | |
{ | |
public DateTime Date { get; set; } | |
public int TemperatureC { get; set; } | |
public string Summary { get; set; } | |
public int TemperatureF => 32 + (int)(TemperatureC / 0.5556); | |
} | |
} |
And that’s it! Great work. Your application should now look like the screenshots below:
![]() |
Index.razor and SurveyPrompt.razor |
![]() |
Counter.razor |
![]() |
FetchData.razor |
Send us your feedback
Keep in mind that the library is a work in progress, and there are still a few PatternFly components being implemented. We are continuously releasing new versions. The good news is that Blorc.PatternFly is open source, and the sources are available on GitHub.If you would like support for any new component, contribute to the Blorc.PatternFly library on GitHub. You can get in touch by:
- Creating tickets.
- Contributing by pull requests.
- Contributing via Open Collective.
Finally, if you want to see the latest develop branch of Blorc.PatternFly in action, you can browse to the live demo with a full overview of all the PatternFly components already available for Blazor. And you’ll probably agree: PatternFly and Blazor are awesome — and combined, they are a beautiful pair.
Interested in contributing an article to the PatternFly Medium publication? Great! Submit your topic idea, and we’ll be in touch.