Getting Started with Syncfusion Blazor Toolkit

Build your first application using Syncfusion Blazor Toolkit components in just a few simple steps. Pick a host model and ship in minutes.

5 min Beginner .NET 8 / 9 / 10

Using Templates

The fastest way to get started is by using our pre-built project templates. Pick the host model that fits your application and ship in minutes.

Blazor Web App

Auto / Server / WASM

Blazor WASM App

Standalone client

Blazor Web App

Auto / Server / WASM

Blazor WebAssembly App

Standalone client

Prerequisites

Make sure the following tools are installed before you start.

.NET SDK 8.0 or later

Download from dotnet.microsoft.com
An IDE of your choice

Visual Studio 2022 17.8+ or Visual Studio Code with the C# Dev Kit
Windows, macOS, or Linux

All Blazor host models are cross-platform

Create a New Blazor Web App Project

Create a new Blazor Web App project with the Auto interactivity mode using the blazortoolkitweb template, or use your favorite IDE.

terminal

dotnet new blazor -o BlazorWebApp
cd BlazorWebApp
dotnet run

Tip

Use the --interactivity flag to pick Auto, Server, or WebAssembly rendering modes, and -ai to enable global interactivity.

Install Syncfusion Blazor Toolkit Package

Add the Syncfusion.Blazor.Toolkit NuGet package to your project. Use the option that matches your workflow.

terminal

dotnet add package Syncfusion.Blazor.Toolkit

Note

When using WebAssembly or Auto render modes, install the NuGet package in the client project since the components run interactively on the client side.

Add Import Namespaces

Open ~/_Imports.razor and add the namespace below to make Syncfusion components available app-wide.

_Imports.razor

@using Syncfusion.Blazor.Toolkit

Register Syncfusion Blazor Toolkit Service

Register the toolkit in Program.cs so the runtime can resolve services and theme assets. The exact registration depends on your host model.

Program.cs

using Syncfusion.Blazor.Toolkit;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents()
    .AddInteractiveWebAssemblyComponents();

// Register Syncfusion Blazor Toolkit services
builder.Services.AddSyncfusionBlazorToolkit();

var app = builder.Build();

Note

When using WebAssembly or Auto render modes, register the AddSyncfusionBlazorToolkit() service in both the server and client Program.cs files to ensure the toolkit functions correctly during server-side prerendering and client-side interactivity.

Add a Syncfusion Component

Add the render mode declaration at the top of your .razor page and the markup below to render a toolkit Button.

Run the Application

Launch the app from your IDE or terminal. The app will launch in your default web browser, displaying the Syncfusion Blazor Toolkit Button component.

Visual Studio Press F5 to run with debugging or Ctrl+F5 without.
VS Code / .NET CLI Run dotnet run from the project root.

Next Steps

Explore Charts

Build interactive data visualizations.

Try Calendar

Add rich date & time pickers.

Use Dialogs

Show modals, prompts & forms.