# Components
> Increase the speed and productivity of your design workflow with reusable components
**Components** are reusable design elements that speed up your workflow and keep your designs consistent.
The main advantage of using components is that you can edit multiple instances of an element at once. For example, if you need to make a change to a button that appears in several places in your design, you can update the button **component** and the change will apply to all its **instances**:
Note: If a component has multiple states, any changes you make apply only to instances of the same state. Instances of other states will not be affected.
## [Component basics](component-basics)
These are the basic terms related to components and their functions:
* **Main component**. The original element that you convert into a component.
* **Component instance**. You create a component **instance** any time you duplicate a main component. When you edit a main component, the changes apply to all of its instances at once.
* **Override**. When you modify an instance, you create an **override**. The main component won't be affected, and if you edit it later, the changes won't apply to instances with overrides.
* **Component page**. A dedicated document page used for storing main components. Lunacy adds it automatically.
Note: Starting from v.12, the Component page appears only in two cases:
When you copy a component from another file to a local file
When you drop on the canvas an element from the GUI tool (button, checkbox, etc.)
* **Component state**. A component can have different variants (Default, Hovered, Pressed, etc.). These variants are called [component states](#component-states).
* **Nested components**. You can nest several components in a more complex component. This gives you the most freedom and flexibility in editing your designs, and it’s an even more powerful feature when coupled with nested auto layouts.
## [Creating components](creating-components)
To **create a component**:
1. Select the element you want to convert into a component.
2. Click in the context toolbar at the top of the canvas or press `Ctrl + Alt + K` / `⌘ + ⌥ + K`.
#### Components and instances in the Layer list
Main components are bold and colored pink in the Layer list, and there’s a component symbol () in front of their name.
Сomponents with more than one [state](#component-states) come with a dashed border around the symbol.
Component instance names aren’t bold but have the instance symbol () and the same pink color. When they’re selected, their properties and options appear in the **Component** section of the right panel.
## [Reusing components](reusing-components)
All the components in your document appear in the **Components tab** in the left panel.
To **add a component instance** to the canvas, you can:
- Drag it from the **Components tab** to where you want to place it.
- Duplicate the existing instance on the canvas.
Right-click a component in the **Components tab** to bring up the context menu with these options:
- Rename component
- Edit component
- Delete component
- Duplicate component
- Group
- Expand all
- Collapse all
Note: If you created any elements using the GUI tool, they will also appear in the Components tab in the group named Web.
## [Component states](#component-states)
You can create multiple states for a component and switch between them as needed. States let you define variations like *Default*, *Hover*, or *Pressed*.
To **create a component state**:
1. Select a component.
2. Click in the context tool bar or press `Ctrl + Alt + P` / `⌘ + ⌥ + P`. A dashed frame will appear around the component, and the new state will be added below the original.
3. Make the required changes to the new state.
4. To create additional states, select the original component or any existing state and click `+` again.
Lunacy automatically assigns names to states (Default, Hover, Pressed, etc.).
To **rename a state**:
1. Select the state.
2. Press F2 and type the new state name after the slash (for example, `Button / Hover` > `Button / Disabled`).
**Alternative workflow**
You can also create a new component state from any instance on the canvas.
See both methods in the video below.
To **switch through component states**:
1. Select a component instance.
2. Choose the new component state in the **right panel**.
Note: Switching component states doesn’t affect overrides.
## [Editing components](#editing-components)
You can **edit a component**:
- Right on the canvas like any other design element. This is the most straightforward and convenient way to edit components.
- In the **Component editor**.
- On the **Components page**.
#### Making edits in the Component editor
1. Select a component instance and press `Enter` or choose **Edit component** in the context menu.
2. You'll see a pink frame around the canvas and the contents of the component will appear in the **Layer list**.
3. Use the right panel to make the required changes.
4. Click anywhere over the canvas, or press `Esc` to exit the component editor.
#### Making edits on the Components page
Note: Starting from v.12, the Component page appears only in two cases:
When you copy a component from another file to a local file
When you drop on the canvas an element from the GUI tool (button, checkbox, etc.)
1. Right-click on an instance and select **Go to Component** in the **right panel** or manually switch to the **Components page**.
2. Edit the required component.
3. Once you’re done:
- If you used the **Go to Component** option, click the **Back to instance** button at the top left corner of the canvas.
- If you manually opened the Components page, simply switch back to the previous page to continue working with the document.
## [Swapping components](#swapping-components)
You can swap between instances of different components. Simply select an instance you want to replace and use one of the following methods.
**Method 1**:
1. Go to the **Components tab**.
2. Find the required component and click
next to it:
**Method 2**:
1. In the right panel, open the Component list.
2. Select the required component (and its state).
The video below shows both these merthods.
#### Deleting components
Delete components from the **Components tab** (using the [context menu](#components-tab-context-menu)) or the **Components page** (simply delete the component frame).
When you delete a component, all of its instances turn into frames.
## [Managing instances](#managing-instances)
### Creating instances
To **add a component instance** to the canvas, you can:
- Drag it from the **Components tab** to where you want to place it.
- Duplicate the existing instance on the canvas.
See the video in the [Reusing components](#reusing-components) section.
### Instance properties
When you select a component instance, the right panel shows an additional section that looks like this:
- **Component list**. A dropdown menu displaying the name of the component. When open, it shows all other components available in the document. By choosing items in the list you can [swap components](#swapping-components).
- **Component states**. Previews of all availalable [component states](#component-states).
- **Detach from component**. Use this button (or `Ctrl + Alt + D` / `⌘ + ⌥ + B`) to detach an instance from its component. Once detached, the instance will no longer reflect changes made to the original component.
- **Go to Component**. This button will bring you to the instance's main component.
- **Reset overrides**. Use this button to remove all [overrides](#overrides) and restore the instance to the component’s original appearance.
- **Component type**. This setting currently has no visible effect.
## Overrides
To reiterate, an override is any edit you make to a component instance. Let's go over them in detail.
Click `▾` next to the title of a component instance in the Layer list to expand its contents. You can modify all the layers inside it to apply the changes to **this component instance only**, creating an override:
Some basic overrides you can make are changes to layer color, text, or image content.
Here’s a simple example of a card component made up of an image (an oval with an **Image** fill) and a labeled button. We applied three overrides: changed the **button color**, updated the **button label**, and replaced the **image**.
You can easily reset all of these overrides by pressing