How to add Syncfusion Component to the toolbox in Blazor Application

21 Jul 20251 minute to read

This section provides step-by-step guidance on how to add Syncfusion® Blazor components to the Visual Studio Toolbox. By default, the Toolbox displays HTML elements and Bootstrap snippets. To customize it for Blazor development, open the Toolbox by pressing Ctrl + Alt + X or by navigating to View → Toolbox from the top menu.

To include Syncfusion components for Blazor in the Toolbox, follow these steps:

  1. Right-click anywhere within the Visual Studio Toolbox window, select Add Tab from the context menu. Enter a name for the new tab such as Syncfusion Blazor Components and press Enter to create it.

Add new tab in toolbox

  1. In the code editor, write or paste a Blazor component snippet, such as the Syncfusion SfCalendar. Once the code is in place, select the entire code snippet, then drag and drop it into the newly created tab in the Visual Studio Toolbox.

Add code snippet to toolbox

  1. Once the code snippet is added, the Toolbox will automatically assign it a default name based on the snippet content.
    To improve clarity, right-click the item, select Rename, and enter a more descriptive name—such as SfCalendar.

Update name

  1. After adding the component to the Toolbox, simply drag the component from the Toolbox into your code editor to seamlessly use it into your Blazor project.

Drag component to editor