# Custom components (alt)

### Overview

When you've spent time configuring and styling a set of components — a slider with a label, a button with a status indicator, a polished input form — Custom Components let you save that combination as a single reusable item. Place it in any project, and if you ever need to update it, all instances across your apps can pick up the change.

This saves you from rebuilding the same thing repeatedly and keeps your apps consistent.

### Creating a Custom Component

You can create a custom component from any component or group of component already on your canvas. There are three ways to start:

* Select the components on the canvas, then **right-click** and choose **Create custom component**.
* Select the components in the **component tree**, right-click and choose **Create custom component**.
* Select the components and click the **custom component cube icon** in the properties panel.

A prompt will appear asking you to name the component. Enter a name and click **Continue**. You'll be taken into edit mode.

### Edit Mode

Edit mode gives you a focused view of your component with the rest of the designer stripped back. Here you can adjust the individual objects inside the custom component just as you would on the main canvas.

When you're done, save the custom component to add it to your **component library**.

### Linked Properties

By default, any spreadsheet bindings on the original components are removed when you create a component. Instead, you set up **linked properties** — named parameters that can be bound to the spreadsheet each time you place an instance of the component in a project. This means different instances of the same component can each show their own data.

#### Adding a linked property

1. In edit mode, click **Add a property** in the Linked Properties section of the properties panel.
2. Give the property a name (for example, `SliderValue` or `LabelText`).
3. Select a component inside the component from the component tree.
4. In the properties panel, hover over the property you want to drive dynamically — the bind button will highlight in purple.
5. Click the bind button. A list of your linked properties will appear.
6. Select the linked property you want to connect to it.
7. Click **Update** to confirm.

#### Binding linked properties on the canvas

Once placed on the canvas as an instance, your linked properties appear in the properties panel and can be bound to spreadsheet cells in the usual way.

### Using a Component from the Library

Once saved, your component appears in the **component library**. Click the cube icon to open the library, find your component, and click or drag it onto the canvas to add an instance to your project.

### Keeping Components Up to Date

If you edit the master component and save your changes, any open project containing instances of that component will be notified. You can choose to accept the update — applying the changes to all instances in that file — or defer it. When you open a project that contains an out-of-date instance, you'll be prompted to update.

{% hint style="info" %}
If you attempt to enter edit mode on an instance that is behind the latest version, you'll be prompted to update first. You can also choose to detach the instance instead.
{% endhint %}

### Detaching an Instance

Detaching converts a component instance back into its individual components, placed inside a container. The components keep their names and settings, but the link to the master component is broken — changes to the master will no longer affect it.

To detach, right-click the instance on the canvas or in the component tree and choose **Detach instance**.

### Renaming a Component

To rename a component, enter edit mode and update the name in the properties panel.

### Things to Know

* You cannot nest a custom component inside another custom component.
* Spreadsheet bindings on the original components are removed when creating a component — use linked properties to make values dynamic.
* Custom components are saved to your personal library. Shared team libraries will be available in a future release.