# Custom Components ### What is a Custom Component? When starting a new project, developers often create their own components. This approach simplifies maintenance and enhances the manageability of our codebase. For example, when a design change is needed for the buttons, it allows us to update a single component's style without having to adjust each button on every screen individually. Creating custom components also makes the code more readable. Typically, incorporating all components on a screen results in lengthy and complex code. To improve readability, we segment the screen's code by creating new components. That's why Monday Hero enables you to create custom components! You can select any part of the screen and simply click 'Create Custom Component' to begin. Monday Hero provides the freedom to create any component that’s needed. In Monday Hero, custom components consist of system components. For instance, a custom component might be a section of the screen that includes buttons, texts, and text fields, making it more readable and reusable. Monday Hero users generally create two types of components in their projects: 1. **Compact Custom Component**: This type of component is used to create a new style for a system component, such as a button. For example, you might want to create a 'Primary Button' to maintain design consistency across various screens. These components are standalone and do not contain other components within them, like a button that does not include a text field inside. Thus, they are termed compact components. * For this example, login and signup buttons are called `PrimaryButton` . The component code is separately created, so it can be reused. ![Reusable Components](/files/-Mc47NcAPnKmkWW_dOSd) 2. **Custom Component Group**: This type of component is a part of any screen and is designed to make the code shorter so it's more readable. It may include compact custom components or any other type of component within it.

### How to Create a Custom Component 1. **Navigate to the Screen:** Go to the screen from which you want to create a component. 2. **Highlight Layers:** Highlight the layers on the screen that you wish to convert into a component. 3. **Select the Component Type:** You can select the component type in three different ways: Use the smart suggestions provided for component types. If the suggestions do not meet your needs, click 'More' to view the complete list of available components.

**Right-click and select the component type from the menu.**

**Alternatively, click the components icon and select 'Create New Component'. Then, choose the component type from the list.**

3. **Set properties:** Once you select the component type, a new screen will appear on the left. * For each layer, select the necessary properties such as title, image, or background image. These options will appear in a list. * Properties will be automatically guessed by Monday Hero, but remember to adjust them if they don’t match the correct properties. Note: Some components do not have any properties. Here is a widget that does not have property selection:

4. **Name Your Component:** You will name your component during this step. This name is used to reference your component in your code, making it important to choose a name that you prefer. 5. **Finish:** Click 'Finish' to complete the creation process. Once finished, you will see a confirmation message indicating that the component was created successfully.

Once the component is created successfully, you'll be able to see its code, and it will be ready for reuse.

All the custom components that you have created in your project will be visible in your custom component library.

Congrats! It's done. --- # 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://learn.mondayhero.io/design-to-flutter/creating-components/custom-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.