# Add a Tab

A tutorial showing how to add a tab in the SpreadJS Designer Component, including UI and code examples

## Content

Follow the below steps to customize the ribbon component by adding a new tab "Contact Us".

1. Access the default configuration.

    ```JavaScript
    // Access the default config
    var config = GC.Spread.Sheets.Designer.DefaultConfig;
    ```
2. Create the layout structure for the new tab and add it to the config.

    ```JavaScript
    // Layout structure of a new tab
    var newTab = {
     "id" : "contactUs",
     "text": "Contact Us",
     "buttonGroups": [
       {
         commandGroup: {
           children: [
             {
              type: "TextBlock",
              text: "Contact sales at (+1) 412-681-4343 or us.sales@mescius.com to request temporary deployment authorization.",
             }
           ]
         }
       }
     ]
    }
    
    // Add new tab to config ribbon
    config.ribbon.push(newTab);
    ```
3. Initialize the designer instance by passing the `config` parameter for customizable configuration.

    ```JavaScript
    // Initialize the designer instance
    var designer = new GC.Spread.Sheets.Designer.Designer("designerHost", config);
    ```

The below output will be generated:
![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image.82f00e.png?width=1000)

> **Note:** If you want to delete a built-in tab from ribbon component, remove its content from default config and repeat step 2 from above.