Syncfusion.Blazor.Toolkit 1.0.0

Prefix Reserved
.NET 8.0 This package targets .NET 8.0. The package is compatible with this framework or higher. 
dotnet add package Syncfusion.Blazor.Toolkit --version 1.0.0
                    


                    

                
NuGet\Install-Package Syncfusion.Blazor.Toolkit -Version 1.0.0
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="Syncfusion.Blazor.Toolkit" Version="1.0.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
<PackageVersion Include="Syncfusion.Blazor.Toolkit" Version="1.0.0" />
                    


                            Directory.Packages.props
                        

                    

                
<PackageReference Include="Syncfusion.Blazor.Toolkit" />
                    


                            Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package. 
paket add Syncfusion.Blazor.Toolkit --version 1.0.0
                    


                    

                
#r "nuget: Syncfusion.Blazor.Toolkit, 1.0.0"
#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. 
#:package Syncfusion.Blazor.Toolkit@1.0.0
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package. 
#addin nuget:?package=Syncfusion.Blazor.Toolkit&version=1.0.0
                    


                            Install as a Cake Addin
                        

                    

                
#tool nuget:?package=Syncfusion.Blazor.Toolkit&version=1.0.0
                    


                            Install as a Cake Tool

Syncfusion® Toolkit for Blazor

The Syncfusion® Toolkit for Blazor is a high-performance, open-source collection of lightweight UI components designed to accelerate Blazor application development (Server and WebAssembly). These controls help developers build modern, responsive, and feature-rich web applications faster, with clean code and excellent performance.

Built with community collaboration in mind, the toolkit incorporates user feedback and contributions to deliver practical, high-quality components that integrate seamlessly with the broader Syncfusion Blazor ecosystem.

NuGet GitHub license GitHub stars

Getting Started

Controls List

Category Control Description
Data Viz Charts Versatile charting component for rendering interactive data visualizations like line, bar, pie, and more with zooming, tooltips, and legends.
Buttons Button Customizable button with support for icons, predefined styles (primary, success, etc.), sizes, and states like disabled or loading.
Buttons ButtonGroup Groups multiple buttons together for unified styling and actions, ideal for toolbars or segmented controls.
Buttons Checkbox Toggleable input for single or grouped selections with customizable labels, states, and indeterminate mode.
Buttons Radio Button Grouped selection control allowing single choice from options, with customizable appearance and accessibility support.
Buttons Toggle Switch Button On/off toggle control (like a switch) for boolean inputs, with customizable labels and states.
Calendars Calendar Interactive monthly calendar view for date selection with navigation, multi-select, and range highlighting.
Calendars DatePicker Popup calendar input for selecting single dates with formatting, validation, and culture support.
Calendars DateTime Picker Combined date and time selector with calendar popup and time spinner for precise datetime input.
Calendars TimePicker Time selection input with spinner or list view, supporting 12/24-hour formats and intervals.
Inputs File Upload Drag-and-drop or browse file input with progress tracking, multiple file support, and validation.
Inputs Numeric TextBox Input for numeric values with formatting, spin buttons, decimals, min/max ranges, and culture support.
Inputs TextArea Multi-line text input with auto-resize, character counter, and floating label support.
Inputs Textbox Single-line text input with floating labels, icons, validation states, and clear button.
Layout Dialog Modal/popup window for alerts, forms, or confirmations with drag, resize, and animation support.
Notification Spinner Loading indicator with customizable size, type, and overlay for async operations.

Installation

Install the Syncfusion Blazor Toolkit via NuGet:

dotnet add package Syncfusion.Blazor.Toolkit

Alternatively, add it directly in your .csproj file:

<PackageReference Include="Syncfusion.Blazor.Toolkit" Version="x.x.x" />

Setup in Your Blazor App

To use the Syncfusion® Blazor Toolkit, register the Syncfusion Blazor services in your Program.cs file as follows:

Program.cs

using Syncfusion.Blazor.Toolkit;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents(); // or AddInteractiveWebAssemblyComponents() for WASM

// Initialize the Syncfusion Blazor Toolkit by adding the below line of code
builder.Services.AddSyncfusionBlazorToolkit();

// Continue initializing your Blazor App here

var app = builder.Build();

// ... rest of your app configuration

Add imports to _Imports.razor

Add the following imports to your _Imports.razor file:

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

Add CSS to your App.razor

Add the Syncfusion Blazor Toolkit styles to the <head> section of your App.razor file:

@* Add syncfusion blazor toolkit style reference *@    
<link id="syncfusion-theme" href="_content/Syncfusion.Blazor.Toolkit/styles/fluent.min.css" rel="stylesheet" />

Usage Example

Here's a quick example to get you started with one of the controls, such as the Chart:

The following Razor code demonstrates how to set up a basic SfChart using the Syncfusion® Blazor Toolkit. This code snippet should be included in a .razor page of your Blazor project. It sets up the necessary namespaces, binds data to the component, and configures the SfChart with two spline area series for comparing Online vs Retail sales data.

Pages/ChartExample.razor

@page "/chart-example"
@using Syncfusion.Blazor.Toolkit.Charts

<h3>Online vs Retails</h3>

<SfChart Height="330px" Title="Online vs Retails">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Toolkit.ValueType.Category" />
    <ChartPrimaryYAxis Title="Sales in Units">
    </ChartPrimaryYAxis>

    <ChartSeriesCollection>
        <ChartSeries DataSource="@ChartData"
                     XName="X"
                     YName="Y"
                     Type="ChartSeriesType.SplineArea"
                     Name="Online"
                     Fill="#00BFFF"
                     Opacity="0.5" />
        <ChartSeries DataSource="@ChartData"
                     XName="X"
                     YName="Y1"
                     Type="ChartSeriesType.SplineArea"
                     Name="Retails"
                     Fill="#FF00CC80"
                     Opacity="0.5" />
    </ChartSeriesCollection>
    <ChartLegendSettings Visible="true"></ChartLegendSettings>
    <ChartTooltipSettings Enable="true"
                          Format="${point.x} : <b>${point.y} Units</b>" />
</SfChart>

@code {
    private List<ChartDataPoint> ChartData = new();

    protected override void OnInitialized()
    {
        ChartData = new List<ChartDataPoint>()
        {
            new ChartDataPoint { X = "Jan", Y = 35, Y1 = 28 },
            new ChartDataPoint { X = "Feb", Y = 28, Y1 = 35 },
            new ChartDataPoint { X = "Mar", Y = 34, Y1 = 32 },
            new ChartDataPoint { X = "Apr", Y = 32, Y1 = 44 },
            new ChartDataPoint { X = "May", Y = 40, Y1 = 32 },
            new ChartDataPoint { X = "Jun", Y = 32, Y1 = 35 },
            new ChartDataPoint { X = "Jul", Y = 35, Y1 = 41 },
            new ChartDataPoint { X = "Aug", Y = 55, Y1 = 48 },
            new ChartDataPoint { X = "Sep", Y = 38, Y1 = 52 },
            new ChartDataPoint { X = "Oct", Y = 30, Y1 = 34 },
            new ChartDataPoint { X = "Nov", Y = 25, Y1 = 36 },
            new ChartDataPoint { X = "Dec", Y = 32, Y1 = 40 }
        };
    }
}

Define a simple data model C# class named ChartDataPoint to represent a data point in your application.

ChartDataPoint.cs

/// <summary>
/// Represents a data point for the Chart with monthly sales data.
/// </summary>
public class ChartDataPoint
{
    /// <summary>
    /// Gets or sets the month (X-axis value).
    /// </summary>
    public string X { get; set; }

    /// <summary>
    /// Gets or sets the online sales in units (Y-axis value).
    /// </summary>
    public double Y { get; set; }

    /// <summary>
    /// Gets or sets the retail sales in units (Y1-axis value).
    /// </summary>
    public double Y1 { get; set; }
}

Support

For any other queries, reach our Syncfusion support team.

Contributing

Contributions are welcome! If you'd like to contribute, please check out our contributing guide for details on how to get started. Whether you find a bug, have a feature request, or want to submit code, we appreciate your help in improving the toolkit.

See the Development Guide for more details about this repository and project structure.

About Syncfusion®

Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion® has more than 35,000 customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.

Today, we provide 1800+ components and frameworks for web (Blazor, ASP.NET Core, ASP.NET MVC, JavaScript, Angular, React, Vue, and Flutter), mobile (.NET MAUI, Xamarin, Flutter, UWP, and JavaScript), and desktop development (WinForms, WPF, WinUI, Flutter and UWP).

sales@syncfusion.com | www.syncfusion.com | Toll Free: 1-888-9 DOTNET

Product Compatible and additional computed target framework versions.
.NET net8.0 is compatible.  net8.0-android was computed.  net8.0-browser 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.  net9.0 is compatible.  net9.0-android was computed.  net9.0-browser was computed.  net9.0-ios was computed.  net9.0-maccatalyst was computed.  net9.0-macos was computed.  net9.0-tvos was computed.  net9.0-windows was computed.  net10.0 is compatible.  net10.0-android was computed.  net10.0-browser was computed.  net10.0-ios was computed.  net10.0-maccatalyst was computed.  net10.0-macos was computed.  net10.0-tvos was computed.  net10.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
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.0 114 5/22/2026