# Create Swift Components

Monday Hero is designed to automatically recognize the images, texts, and views in your design. However, to develop a fully functioning app, essential components such as buttons and text fields must be manually created. This document guides you through creating components on Monday Hero to achieve a fully operational app.

### Types of Components

In Monday Hero, there are two main types of components: System Components and Custom Components.

* [**System Components:**](/design-to-swift/creating-components/system-components.md) These are predefined components provided by the development language, such as a Material Button.
* [**Custom Components:**](/design-to-swift/creating-components/custom-components.md) These are components that you create using system components. For example, a custom component might be a part of the screen that includes buttons, texts, and text fields, making it more readable and reusable.

Please refer to the sections for examples of both system and custom components.

### How to Create a Component?

You can learn how to create components by watching the video below or by continuing to read this guide.

{% embed url="<https://youtu.be/FiBBZKPWVfQ>" %}
How to create components
{% endembed %}

Monday Hero detects every design element as images, texts, and views, similar to what you see below. It’s crucial to convert these elements into functional components:

![Convert to Components](/files/-Mc3yFMDBMZ9_RBy4AGY)

Next, begin creating system components.


---

# 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-swift/creating-components.md?ask=<question>
```

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.