> For the complete documentation index, see [llms.txt](https://learn.mondayhero.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learn.mondayhero.io/design-to-flutter/creating-components.md).

# Create Flutter 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-flutter/creating-components/system-components.md) These are predefined components provided by the development language, such as a Material Button.
* [**Custom Components:**](/design-to-flutter/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](/design-to-flutter/creating-components/system-components.md) and [custom components](/design-to-flutter/creating-components/custom-components.md).

### 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.

&#x20;