# Quick Start

## Content

<span id="44dbd7e2-4ee7-4ac3-83e0-6c7a637aee25" annotationtype="inlineComment" data-mark-type="annotation" data-mark-annotation-type="inlineComment" data-id="44dbd7e2-4ee7-4ac3-83e0-6c7a637aee25" data-prosemirror-content-type="mark" data-prosemirror-mark-name="annotation">This section shows you how to add and use the C1ToolStrip component in a Blazor application.</span>

### **Prerequisites**

* NuGet package: **C1.Blazor.Ribbon**

### **<span id="33787bfb-29ee-406a-8935-862f6d72af40" annotationtype="inlineComment" data-mark-type="annotation" data-mark-annotation-type="inlineComment" data-id="33787bfb-29ee-406a-8935-862f6d72af40" data-prosemirror-content-type="mark" data-prosemirror-mark-name="annotation">Create ToolStrip for Blazor application</span>**

1. <span id="4a8cfdb8-488c-4141-954f-8c543a0e4f9e" annotationtype="inlineComment" data-mark-type="annotation" data-mark-annotation-type="inlineComment" data-id="4a8cfdb8-488c-4141-954f-8c543a0e4f9e" data-prosemirror-content-type="mark" data-prosemirror-mark-name="annotation">Install the </span>**<span id="4a8cfdb8-488c-4141-954f-8c543a0e4f9e" annotationtype="inlineComment" data-mark-type="annotation" data-mark-annotation-type="inlineComment" data-id="4a8cfdb8-488c-4141-954f-8c543a0e4f9e" data-prosemirror-content-type="mark" data-prosemirror-mark-name="annotation">C1.Blazor.Ribbon</span>**<span id="4a8cfdb8-488c-4141-954f-8c543a0e4f9e" annotationtype="inlineComment" data-mark-type="annotation" data-mark-annotation-type="inlineComment" data-id="4a8cfdb8-488c-4141-954f-8c543a0e4f9e" data-prosemirror-content-type="mark" data-prosemirror-mark-name="annotation"> package from the </span>**<span id="4a8cfdb8-488c-4141-954f-8c543a0e4f9e" annotationtype="inlineComment" data-mark-type="annotation" data-mark-annotation-type="inlineComment" data-id="4a8cfdb8-488c-4141-954f-8c543a0e4f9e" data-prosemirror-content-type="mark" data-prosemirror-mark-name="annotation">NuGet Package Manager</span>**<span id="4a8cfdb8-488c-4141-954f-8c543a0e4f9e" annotationtype="inlineComment" data-mark-type="annotation" data-mark-annotation-type="inlineComment" data-id="4a8cfdb8-488c-4141-954f-8c543a0e4f9e" data-prosemirror-content-type="mark" data-prosemirror-mark-name="annotation">.</span>
2. <span id="4a8cfdb8-488c-4141-954f-8c543a0e4f9e" annotationtype="inlineComment" data-mark-type="annotation" data-mark-annotation-type="inlineComment" data-id="4a8cfdb8-488c-4141-954f-8c543a0e4f9e" data-prosemirror-content-type="mark" data-prosemirror-mark-name="annotation">Add the stylesheet:</span>

```xml
<link href="_content/C1.Blazor.Ribbon/styles.css" rel="stylesheet" />
```

3. <span id="4aa0a866-228f-4cd6-94e5-f43835681121" annotationtype="inlineComment" data-mark-type="annotation" data-mark-annotation-type="inlineComment" data-id="4aa0a866-228f-4cd6-94e5-f43835681121" data-prosemirror-content-type="mark" data-prosemirror-mark-name="annotation">Import namespaces:</span>

```auto
@using C1.Blazor.Ribbon
```

### **Content Population Methods**

The two primary methods for populating the toolbar are the declarative approach and the data-driven approach, described in the following sections.
1\. Declarative Approach
2\. Data Driven Approach

<br>
