# Creating reusable components

Custom components in JSX.Design let you reuse groups of elements effortlessly. Instead of recreating similar structures repeatedly, you can combine elements, save them as a custom component, and drag them into your canvas whenever needed.

{% embed url="<https://youtu.be/x8dd4IsyzIg>" %}

## How to create a custom component

<details>

<summary><strong>Option 1: From the Canvas</strong></summary>

* **Right-Click an Element**:
  * Open the **Layers panel** and right-click on a `div` or any block.
  * Select **"Add to Components"** from the menu.
* **Name Your Component**:
  * Enter a name for the new custom component.
  * Click **"Create"** to save it.
* **Edit the Component**:
  * A new canvas will open for the custom component.
  * Make any changes here, and these updates will automatically reflect on all instances of this component across your project.

</details>

<details>

<summary>Option 2: From My Projects</summary>

* **Navigate to My Projects**:
  * Open the **My Projects** modal and select the desired project.
* **Create a Component**:
  * Click the **"+" button** within the project.
  * Name your custom component and select **"New Reusable Component"**.
  * Click **"Create File"**.
* **Locate Your Component**:
  * The custom component will appear inside the project's **components folder**, ready for us

</details>

***

## Exporting custom components

* Export custom components as JSX or TSX, just like regular components.
* When you export a project, all custom components are stored separately inside the **components folder** for easy organization and reuse.

***

## Editing a custom component

<details>

<summary>Option 1: From the Canvas</summary>

* **Right-Click on the Component**:
  * Select **"Edit this Component"** from the menu.
* **Update the Component**:
  * Make edits on the custom component's canvas.
  * All changes will automatically sync across all instances of the component.

</details>

<details>

<summary>Option 2: From My Projects</summary>

* **Open My Projects**:
  * Select the project containing your custom component.
* **Find and Edit**:
  * Inside the **components folder**, select the custom component you want to modify.
  * Click **"Edit in Canvas"** to open and update it.

</details>

## Deleting custom components

### Deleting from a canvas

**Right-Click** the custom component in the canvas and select **"Delete"** to remove it from the current canvas.

### Deleting the component from project

* Open **My Projects**, select the project containing the custom component, and navigate to the **components folder**.
* Right-click the custom component and select **"Delete"** to remove it entirely from the project.
* <mark style="color:orange;">**Note**</mark><mark style="color:orange;">:</mark> This action is irreversible.

***

#### **Next Steps:**

Great! Let's move on to other exciting topics:


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://skyslit.gitbook.io/jsx.design/styling-ui/creating-reusable-components.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.