967323: Added UG for adding components to the toolbox

Author: SubathraKaliamoorthy

blazor/common/how-to/add-blazor-component-to-the-toolbox.md

@@ -0,0 +1,30 @@
+---
+layout: post
+title: Adding Blazor component to the toolbox - Syncfusion
+description: Check out the documentation for adding Syncfusion Blazor component to toobox in Blazor
+platform: Blazor
+component: Common
+documentation: ug
+---
+
+# How to Add Blazor Component to the toolbox in Blazor Application
+
+This section explains how to add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component to the toolbox. To customize the Visual Studio Toolbox for Blazor, which by default shows HTML components and Bootstrap snippets, you can open the Toolbox by pressing `Ctrl+Alt+X` or navigating to **View → Toolbox** in the menu.
+
+To include Syncfusion components for Blazor in the Toolbox, follow these steps:
+
+1. Right-click anywhere in the Toolbox window and choose 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](images/new-tab-toolbox.png)
+
+2. In a code editor, write or paste a code snippet for a Blazor component, such as a Syncfusion Calendar. Highlight the code, then drag and drop it into the newly created tab in the Toolbox.
+
+![Add code snippet to toolbox](images/add-snippet.gif)
+
+3. The Toolbox will automatically assign a name to the item based on the code snippet. You can rename it to something more descriptive, like **SfCalendar**, for better clarity.
+
+![Update name](images/update-name.png)
+
+4. Once added, you can drag the component from the Toolbox directly into your code editor for use in your Blazor project.
+
+![Drag component to editor](images/drag-component.gif)