---
url: https://gudhub.com/uk/docs/ssr-ssg/components-library/how-it-works/
title: "How components-library works\n                #"
description: "How components library works Content Component Files Structure General Config How to use components Each separate component has folder named as tagName of compo"
lang: uk
updated: 2026-09-12T11:49:45.975Z
---

# How components-library works [#](https://gudhub.com/uk/docs/ssr-ssg/components-library/how-it-works/#how-components-library-works)

## Content [#](https://gudhub.com/uk/docs/ssr-ssg/components-library/how-it-works/#content)

-   [How components-library works](#how-components-library-works)
    -   [Content](#content)
    -   [Component Files Structure](#component-files-structure)
    -   [General Config](#general-config)
    -   [How to use components](#how-to-use-components)

## Component Files Structure [#](https://gudhub.com/uk/docs/ssr-ssg/components-library/how-it-works/#component-files-structure)

Each separate component has folder named as tagName of component, and files:

-   `config.js`: file that store object with tagName and path of component;
-   `component-name.html` : layout file;
-   `component-name.js` : js file;
-   `component-name.scss` : styles;
-   `component-name.json` : template of data from gudhub;
-   `component-name.readme.md` : documentation;

## General Config [#](https://gudhub.com/uk/docs/ssr-ssg/components-library/how-it-works/#general-config)

Config `./src/config.js` contains a list of exports of configurations of all components. Used to connect all lib components in one time.

## How to use components [#](https://gudhub.com/uk/docs/ssr-ssg/components-library/how-it-works/#how-to-use-components)

Just use as usual ssg-ssr component, write its tagName in page html and add correspond data-gh-id attribute (if component needs it).

Example:

Копіювати

```html
   <custom-component data-gh-id="test-component"></custom-component>
```