# Components ## Video Overview {% embed url="" %} The components editor is where you can create reusable elements, such as buttons, link styles, cards, icons, avatars, and more. You can access each component and make edits or add modifier classes and pseudo-classes. Here is an example of the components overview, where you can see all the components you've created in one place:

Components Editor Overview

## 1. Editing Components To edit a component, simply click on the "Edit" button. If there are no components to edit, you can click on the plus icon to create a new one!

Creating a Component is this Easy!

When adding a new component, you can select the type from the list. Once you have added a component, it will be visible in your components section, and an edit button will become available for it. Clicking on the edit button will open up a new window where you can add modifiers and states/pseudos to the component. ### 1.1 Naming your Component Class To customize the name of your new component, click on the base class field on the left under "default styles". You can then give it any name you like. As you type, all other instances of the name will change in real time.

Editing the class name

### 1.2 Adding Modifiers To add a modifier to your component class, simply click on the "Add a modifier" button at the top. It will automatically be added under the "Modifiers" section:

Adding a modifier

Simply click in the field to add your modifier name to the base class. {% hint style="info" %} In this box, you can add a conjoining class without any spaces, such as `.btn-primary.is-large`. You can also add selectors like `.btn-primary svg`. Furthermore, you can add your own pseudo-classes, such as `.btn-primary:focus`, for unlimited flexibility! {% endhint %} ### 1.3 Adding States To add states or pseudo-classes, simply hover over your base class or modifier classes to see the "+State" option appear. Clicking on this option will display a list of states that you can add to your modifier classes. These states will then appear under the class.

Adding States

{% hint style="info" %} If your components are difficult to see on our default background, then please use this button to toggle different background colors: {% endhint %}

Clicking on this button will toggle different backgrounds

### 1.4 Deleting Modifiers and States To delete modifiers and states, simply click on the mini menu (3 dots) and choose "Remove" from the menu:

Removing Modifiers and/or States

--- # 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://docs.coreframework.com/navigating-the-ui/components.md?ask= ``` 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.