Merge pull request #6286 from syncfusion-content/BLAZ-967323-MissingUG

967323: Added UG for adding components to the toolbox

Author: Karthigaiselvi-SF2856

blazor-toc.html

@@ -293,6 +293,9 @@
 				<ul>
 	    			<li>
 			        	<a href="/blazor/common/extend-and-customize-components">Extend and Customize the Syncfusion Components</a>
+		        	</li>
+					<li>
+			        	<a href="/blazor/common/how-to/add-blazor-component-to-the-toolbox">Add Blazor Component to the toolbox</a>
 		        	</li>
 					<li>
 						<a href="/blazor/common/how-to/add-blazor-component-on-existing-aspnet-core-mvc-app">Add Blazor Components on Existing ASP.NET Core MVC Application</a>

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: Checkout and learn here all about the documentation for adding Syncfusion Blazor component to the toolbox in Blazor
+platform: Blazor
+component: Common
+documentation: ug
+---
+
+# How to add Syncfusion 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)