# Components

Components let builders save and recycle elements within a room. When an element is saved as a component, you can easily duplicate that element while maintaining its assigned properties - including hitboxes, z-indexes and interactions.&#x20;

## Creating and Using Components

To turn an element into a component, select the element and click **Create Component**. Once an element is converted to a component, its selection box will turn from blue to purple for easy identification.

<figure><img src="https://107867006-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdnMYfhsZ5GJTgbm1KIe7%2Fuploads%2FqXgXgFy3MYdqBg8UoY3E%2FCleanShot%202023-07-31%20at%2014.57.43%402x.png?alt=media&#x26;token=05182133-7f69-478b-9e57-6b30488b9a2a" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
If your element has any interactions applied, those will automatically apply to your component settings.
{% endhint %}

One your component is created, you can use it across your room. You can view, add and edit all your room's components by navigating to [**Asset Manager**](https://docs.bueno.art/buenoverse/fundamentals/asset-manager) **> Components**.&#x20;

<figure><img src="https://107867006-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdnMYfhsZ5GJTgbm1KIe7%2Fuploads%2FPkvpH9lSpeOn2GIWYnoR%2FCleanShot%202023-07-31%20at%2015.47.32%402x.png?alt=media&#x26;token=72480d44-b331-4780-a669-daa415ec2089" alt=""><figcaption></figcaption></figure>

You can access component from other rooms in your world by typing in that room's slug in the **Room** field.

You can grab a component you created from the asset manager and place it in a room, **or duplicate it by holding `Option+Drag (MacOS) / Alt+Drag (PC)`.**

<figure><img src="https://107867006-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdnMYfhsZ5GJTgbm1KIe7%2Fuploads%2FWxreKRanGnVHjYOjOiTi%2FCleanShot%202023-07-31%20at%2016.54.14.gif?alt=media&#x26;token=e9bfeb50-8276-4d6f-8691-73ec60ba47b7" alt=""><figcaption></figcaption></figure>

To unlink a component and make it a regular element again,  you can select **Detach** from the tool bar or quick edit menu on the right.&#x20;

<div><figure><img src="https://107867006-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdnMYfhsZ5GJTgbm1KIe7%2Fuploads%2FTQdgsWysfGGwvlQqL3ck%2FCleanShot%202023-07-31%20at%2017.43.15%402x.png?alt=media&#x26;token=0cf3855a-166f-4460-9d36-adab4a6f33af" alt="" width="375"><figcaption></figcaption></figure> <figure><img src="https://107867006-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdnMYfhsZ5GJTgbm1KIe7%2Fuploads%2FQAnwmIPDbc61UuN9JsMJ%2FCleanShot%202023-07-31%20at%2017.44.17%402x.png?alt=media&#x26;token=f97df8e5-ca7b-4b6d-b154-e7ecea29925b" alt="" width="375"><figcaption></figcaption></figure></div>

## Edit components

Once an element is a component, new interactions and properties can be edited from the component editor menu. To edit a single component, select your element and navigate to **Edit Component**.&#x20;

<figure><img src="https://107867006-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdnMYfhsZ5GJTgbm1KIe7%2Fuploads%2FaHHKo5ouj62i7CDnbeyF%2FCleanShot%202023-07-31%20at%2017.19.41%402x.png?alt=media&#x26;token=503e6efd-db2a-4841-9255-16934e5ee993" alt=""><figcaption></figcaption></figure>

This will bring up the **Edit Component** menu, isolating your component for more precise editing.&#x20;

<figure><img src="https://107867006-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdnMYfhsZ5GJTgbm1KIe7%2Fuploads%2FBRO8iKJXDg8D2rmBzaxP%2FCleanShot%202023-07-31%20at%2017.31.10%402x.png?alt=media&#x26;token=9b68a67a-e63b-420d-9966-e04983cf7247" alt=""><figcaption></figcaption></figure>

In this menu, you can add or remove additional interactions, as well as edit the hitbox/z-index and other properties.&#x20;

{% hint style="info" %}
Any changes to the component will automatically apply to all existing instances of that component. Give your new components **detailed names** if you plan to make variations with the same element!
{% endhint %}
