> For the complete documentation index, see [llms.txt](https://nocodable.gitbook.io/nocodable-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nocodable.gitbook.io/nocodable-components/how-to-use/adding-components-to-your-app.md).

# Adding components to your app

Hey !

Welcome to Nocodable Components 💪

### Introduction

Nocodable Components is a Components Library for Bubble.io.

What does it mean ?

That our product is a library of premade "sections & elements" that you can easily import to your own Bubble app.

* Components are all hand made
* Components are all 100% responsive
* Component are all built using Bubble's newest responsive engine

In this article, we'll cover the basics of adding components to your own app.

### Before pasting a component

Pasting a component is pretty simple.

However, you need to <mark style="background-color:orange;">**make sure of one important thing**</mark>.

Your page needs to have a Type of Layout set before pasting a component.

<figure><img src="https://524250174-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzYsTB9dnbhgxarKmVBQU%2Fuploads%2FvGfy918Z0ydLVB4ZXvFb%2FCleanShot%202024-09-18%20at%2017.53.15%402x.png?alt=media&amp;token=4b80009c-9986-44f6-b3b0-969eb344f932" alt=""><figcaption><p>Make sure that the "Container Layout" of your page is <strong>not set to Fixed</strong></p></figcaption></figure>

### Pasting Components

In Nocodable Components you'll find two types of Components :&#x20;

* Components **with** workflows
* Components **without** workflows

You can recognize them with the tag displayed on their thumbnail.

If you see a tag saying "With workflows" on the thumbnail, then it means that the component has workflows attached to it.&#x20;

#### Pasting a component WITH workflows

If you decide to copy a component that has workflows, you need to make sure to use the "<mark style="background-color:orange;">**Paste with Workflows**</mark>" action.

Otherwise it will not paste the correct component.

<figure><img src="https://524250174-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzYsTB9dnbhgxarKmVBQU%2Fuploads%2FaKaSUmd6ieC4WpNh4yla%2FCleanShot%202024-09-18%20at%2017.57.01%402x.png?alt=media&amp;token=c597db2a-03ae-4e4f-b0ab-3ea4fd3cc1e3" alt=""><figcaption></figcaption></figure>

#### Pasting a component without workflows

If the component you decided to copy doesn't have workflows, you can use the **classic paste action**.

<figure><img src="https://524250174-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzYsTB9dnbhgxarKmVBQU%2Fuploads%2FEUCDiZdD4iMpas7zM5UI%2FCleanShot%202024-09-18%20at%2017.58.04%402x.png?alt=media&amp;token=520aa418-e740-40f3-8188-af28ef935317" alt=""><figcaption></figcaption></figure>