---
url: https://gudhub.com/docs/ssr-ssg/tutorials/add-component-to-library/
title: "How to Add a Component to Components-Library\n                #"
description: "How to Add a Component to Components Library Content Create Component Files Update General Config 1. Create a folder for your component : The folder name should"
lang: uk
updated: 2026-09-08T15:38:10.987Z
---

# How to Add a Component to Components-Library [#](https://gudhub.com/docs/ssr-ssg/tutorials/add-component-to-library/#how-to-add-a-component-to-components-library)

## Content [#](https://gudhub.com/docs/ssr-ssg/tutorials/add-component-to-library/#content)

-   [How to Add a Component to Components-Library](#how-to-add-a-component-to-components-library)
    -   [Content](#content)
    -   [Create Component Files](#create-component-files)
    -   [Update General Config](#update-general-config)

## Create Component Files [#](https://gudhub.com/docs/ssr-ssg/tutorials/add-component-to-library/#create-component-files)

1.  **Create a folder for your component**:
    
    -   The folder name should match the `tagName` of your component. For example, if your component's tagName is `custom-component`, create a folder named `custom-component`.
2.  **Add required files to the folder**:
    
    -   `config.js`: Define the component’s configuration here. The file should export an object with the following structure:
        
        Copy
        
        ```javascript
        export default {
            tagName: 'custom-component',
            path: './src/components/custom-component/custom-component.js',
        };
        ```
        
    -   `custom-component.html`: Create the layout of the component using HTML.
    -   `custom-component.js`: Write the JavaScript logic for the component.
    -   `custom-component.scss`: Add styles for the component.
    -   `custom-component.json`: Provide a template of data from gudhub that the component will use.
    -   `custom-component.readme.md`: Document the component’s functionality, usage, and any additional notes.

## Update General Config [#](https://gudhub.com/docs/ssr-ssg/tutorials/add-component-to-library/#update-general-config)

1.  Open the general configuration file: `./src/config.js`.
    
2.  Export your component’s `config.js` file from general config:
    
    Copy
    
    ```javascript
    export customComponent from './components/custom-component/config.js';
    ```
    
3.  Save the changes.