> For the complete documentation index, see [llms.txt](https://help.smallbuilder.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.smallbuilder.com/smallbuilder-documents/basic-examples/howto-separators.md).

# How to add separators between the components

Using horizontal dividers

<figure><img src="https://3800415611-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNuSjRiJMvVhtdzNDzWBi%2Fuploads%2FpqX9m6huQA5PFcemKeOU%2F20250423_090100.png?alt=media&amp;token=3128cca3-b75d-4698-8c3e-1f98adfefe36" alt=""><figcaption></figcaption></figure>

1. Add the `Divider` component.

***

<figure><img src="https://3800415611-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNuSjRiJMvVhtdzNDzWBi%2Fuploads%2FXUVV5idmIBbPZN20LS3g%2F%EB%85%B9%EC%9D%8C-2025-04-23-090243.gif?alt=media&amp;token=47a1bc79-2db1-42d8-a022-59e16233cc5f" alt=""><figcaption></figcaption></figure>

2. Move the `Divider` component to the desired location.

***

<figure><img src="https://3800415611-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNuSjRiJMvVhtdzNDzWBi%2Fuploads%2FPkFLw2rIJGWMFLu7fb94%2F20250423_090415.png?alt=media&amp;token=8105b491-0e72-4845-9e73-1489cf91a2ff" alt=""><figcaption></figcaption></figure>

3. Go to the component settings and set the colour and line weight of the separator.