Introducing Syncfusion Toolkit for Blazor: Free Open Source Blazor Components

What is Sync Device for Blazor?

Synchronization^® The Toolkit for Blazor is a collection of free, MIT-licensed, open source Blazor UI components designed to help developers build modern Blazor apps faster.

Hosted on GitHub and distributed via NuGet, the toolkit provides reusable, customizable, and production-friendly UI components that developers can easily integrate into their applications.

Rather than building a common UI infrastructure from scratch, developers can use ready-to-integrate components for charts, forms, dialogs, uploads, date selection, input handling, and other common application scenarios.

The Toolkit for Blazor focuses on providing essential UI building blocks that help developers quickly build modern business applications with cleaner, easier-to-maintain code.

Why we created Syncfusion Toolkit for Blazor

Syncfusion has long provided a comprehensive commercial suite of Blazor UI components for enterprise application development. With Sync Toolkit for Blazorwe’re expanding our support for the Blazor developer community by offering a set of critical UI components that are free and open source.

Open source helps developers by providing:

• Greater transparency,
• More flexibility,
• Easier customization,
• Community-based collaboration, and
• Long-term control over the application’s UI infrastructure.

Our goal is simple:

Help developers build modern Blazor apps faster using community-friendly, reusable UI components under the MIT license.

This release reflects our ongoing commitment to supporting the .NET ecosystem and Blazor through open source contributions and developer-focused tools.

What is included in the first release?

First release of Sync Toolkit for Blazor covers commonly used UI components for modern web and business applications.

Chart

Create interactive visualizations such as line, bar, column, area, scatter, bubble, and other chart types for dashboards, analytics, and reporting experiences.

Buttons and Button Groups

Add customizable buttons and grouped actions for forms, toolbars, dialogs, and modern app interfaces.

Date and time components

Calendar

Provides an interactive calendar-based date selection experience.

Date Picker

Simplify date selection with easy-to-use calendar input.

DateTime Selector

Combine date and time options in one control.

Time Selector

Enable precise and flexible timing workflows.

Text Boxes and Text Areas

Capture single-line and multi-line user input for forms, comments, notes, search fields, and data entry screens.

Insert and switch Components

checkbox

Enable simple and intuitive selection-based interactions.

Radio Buttons

Allow users to select one option from a grouped selection.

Numeric Text Box

Accept formatted numeric input with validation-friendly behavior.

Toggle Switch Button

Create modern on/off interactions for setting and managing states.

Upload Files

Add file upload capabilities with drag-and-drop support, progress tracking, and a flexible upload experience.

Dialog

Create alerts, confirmations, modal popups, and interactive dialogs for modern application workflows.

Spinner

Clearly displays loading and processing status during asynchronous operations.

Together, these free Blazor UI components help developers build:

• Dashboard
• Admin panel
• Reporting system
• Data entry form
• Internal business tools
• SaaS Applications
• Enterprise web application

with much less UI setup effort.

Getting started with Syncfusion Toolkit for Blazor

Let’s create a simple Blazor app and add your first component from the Toolkit for Blazor.

Step 1: Create a new Blazor Web app

Start by creating a new Blazor Web app project using the following command.

dotnet new blazor -n MyBlazorApp

cd MyBlazorApp

Step 2: Install the NuGet package

Install the Syncfusion Toolkit package for Blazor using the following command:

dotnet add package Syncfusion.Blazor.Toolkit

Step 3: Register the Syncfusion service

In you Program.cs file, register the Syncfusion Blazor service.

using Syncfusion.Blazor;

var builder = WebApplication.CreateBuilder(args);

builder.Services
       .AddRazorComponents()
       .AddInteractiveWebAssemblyComponents();

builder.Services.AddSyncfusionBlazor();

var app = builder.Build();

// Remaining app configuration

Step 4: Import the required namespaces

Add the following namespace to _Import.razor submit.

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Toolkit

Step 5: Add a stylesheet reference

Add the necessary CSS references to your layout file.

<link href=" rel="stylesheet" />

Step 6: Add your first component

Now, you can use Toolkit components for Blazor in your Blazor pages.

@page "/"
@using Syncfusion.Blazor.Toolkit.Buttons

<h1>Welcome to Syncfusion Toolkit for Blazor!</h1>

<SfButton OnClick="@HandleButtonClick" CssClass="e-success">
    Click Me!
</SfButton>

<p>Button clicked: <strong>@clickCount</strong> times</p>

@code
{
    private int clickCount = 0;

    private void HandleButtonClick()
    {
        clickCount++;
    }
}

Step 7: Run the application

Launch your application using the following command:

And, open the app in your browser and see the Syncfusion Toolkit for Blazor components in action.

See the following image.

Built for modern Blazor apps

That Sync Toolkit for Blazor designed for modern Blazor development scenarios, including:

• Blazor Web App,
• Interactive Server Rendering,
• Interactive WebAssembly rendering,
• Interactive Auto Mode,
• Standalone Blazor WebAssembly applications,
• Modern .NET versions, including .NET 8, .NET 9, and future releases of .NET.

This gives developers the flexibility to use the toolkit across a variety of hosting and Blazor rendering models.

Why open source matters to Blazor developers

Open source UI components provide more than just free access. They provide developers with flexibility, visibility, and long-term control over their application’s UI infrastructure.

With Sync Toolkit for Blazordevelopers can:

• Review source code,
• Understand component implementation details,
• Adjust behavior based on project needs,
• Contribute to improvements,
• Use components in personal, startup, commercial, and enterprise applications.

Since the toolkit is released under the MIT license, developers can confidently adopt it in a variety of application scenarios without complicated licensing restrictions.

Start building with Syncfusion Toolkit for Blazor

Thanks for reading! Open source continues to accelerate innovation and developer collaboration, and we’re bringing that same philosophy to Blazor development with the Syncfusion Toolkit for Blazor.

With the growing collection of free and MIT-licensed Blazor UI components, developers can build dashboards, forms, dialogs, admin interfaces, and modern business applications faster while maintaining full flexibility and visibility into the source code.

The toolkit is hosted on GitHub and supported with documentation, API references, and practical examples to help teams get started quickly.

Explore the Syncfusion Toolkit for Blazor, try out the components in your projects, and start building modern Blazor apps faster now.