> For the complete documentation index, see [llms.txt](https://skyslit.gitbook.io/jsx.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://skyslit.gitbook.io/jsx.design/styling-ui/creating-reusable-components.md).

# 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: