FreeBlazor 1.0.9

.NET 8.0
dotnet add package FreeBlazor --version 1.0.9
NuGet\Install-Package FreeBlazor -Version 1.0.9
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="FreeBlazor" Version="1.0.9" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add FreeBlazor --version 1.0.9
#r "nuget: FreeBlazor, 1.0.9"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install FreeBlazor as a Cake Addin
#addin nuget:?package=FreeBlazor&version=1.0.9

// Install FreeBlazor as a Cake Tool
#tool nuget:?package=FreeBlazor&version=1.0.9

FreeBlazor Components

A set of free native Blazor components built in .NET 8.

Getting Started with FreeBlazor

1. Install

Install the nuget package. You can add the package to your project using any of the following methods.

  • Install the package from the command line by running dotnet add package FreeBlazor
  • Add the package from the Visual Nuget Package Manager by searching of FreeBlazor
  • Manually edit the project file to add a reference to the nuget package.

2. Import the Namespace

Open the _Imports.razor file of your Blazor application and add the line @using FreeBlazor. This step is optional, as you can always reference the components using the full namespace and component name (eg: <FreeBlazor.DeleteConfirmation /> instead of <DeleteConfirmation />).

3. Include a Reference to the CSS Resources

Open your main Blazor application page (App.razor, Pages_Layout.cshtml, Pages_Host.cshtml, or wwwroot/index.html) and include a reference to the CSS file as:

<link rel="stylesheet" href="_content/FreeBlazor/styles.css" />

You can omit the CSS file if you do not wish to use the included styling and instead want to handle the styling yourself.

4. Use a Component

<DeleteConfirmation OnConfirmed="YourDeleteMethod" />

The Components


An autocomplete field similar to the jQuery UI autocomplete component. There are a couple of properties that are required. They are:

  • GetAutoCompleteItems - This is a method that will be invoked receiving the current text that has been typed in the input and needs to return a tuple list List<(string key, string label)>?.
  • OnSelected - A function that will be invoked when an item is selected from the list. This function will receive the selected tuple value (string key, string label).

The other optional parameters are documented with XML markup comments to help with their use. An example of using this component is:

    PlaceholderText="Search for a User" />

Delete Confirmation

A simple component that shows a delete button initially. Then, when that button is clicked it is replaced with a cancel button and confirm delete button. The only required parameter for this component is an EventCallback for the OnConfirmed parameter. This is the method which will be invoked when the final confirm delete button is clicked. There are additional parameters that can be used to override the default text labels, icons, and button classes. The defaults will use FontAwesome icons and Bootstrap classes on the buttons. An example of using this component is:

<DeleteConfirmation OnConfirmed="YourDeleteFunction" />

Generate Password

A control used to generate a random password with options for length and toggles for requiring uppercase, lowercase, numbers, and special characters. Can be used on a page, but works better in a dialog as a popup selector. An example of using this component is:


protected void GeneratedPassword(string password){
    User.Password = password.

HTML Editor

An HTML editor that uses the ckEditor 4 to create an editor that can be used as-is or highly customized via a configuration parameter. No parameters are required to use this control. You can set a @ref to the element so that you can get and set the values. An example of using this component is:


@code {
    HtmlEditor _htmlEditor;
    protected HtmlEditor.HtmlEditorConfiguration _config = new HtmlEditor.HtmlEditorConfiguration {
        PlaceholderText = "Enter Your HTML Here",
        SimpleView = false,

// Examples of interacting with the editor
// Set the HTML
await _htmlEditor.SetHTML("<p>Your HTML Here</p>");

// Set the Focus
await _htmlEditor.SetFocus();

// Get the HTML
string html = await _htmlEditor.GetHTML();


A multiselect list that gets around some of the limitations of trying to do that standard Blazor binding against a select list with the multiple flag set to true. Pass in your options to the Options parameter as a tuple list (eg: List<(string value, string label, bool selected)>). An optional Action parameter OnUpdate can be set to notify your code when the values have changed. These will be passed as a List<string> to your function. An example of using this component is:

    OnUpdate="YourFunctionToBeNotifiedWhenTheSelectionChange" />

The parameters for this component are all documented with XML comments.

Paged Recordset

A control for displaying a table to represent a collection of data. The only required parameters are RecordData which uses an internal class of Recordset to take the information about your data and the NavigationCallbackHander which takes an action that will be invoked when the records per page changes, the current page is changed, or a column sort is changed. All parameters have XML comments for help with using them. An example of using this component is:

    RecordData="YourRecordsetObjectThatContainsYourDataInformation" />


Contact Brad Wickett at for assistance.

You can also download the source code for this project from my Azure DevOps site at The source code includes a demo Blazor app that shows how to use each component, along with some more advanced demos of using components inside of a dialog.

Product Compatible and additional computed target framework versions.
.NET net8.0 is compatible.  net8.0-android was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
Compatible target framework(s)
Additional computed target framework(s)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
1.0.9 70 12/1/2023