# UI components

Appfarm Create includes a library of UI components to enable you to quickly build a [user interface](/reference/apps/ui.md) and connect it to your [data](/reference/apps/data.md) and [actions](/reference/actions.md). Simply drag and drop a UI component into a view and configure the properties and styles as required.

UI components are implemented using Google's Material Design system for user interface design, specifically Material 3. For more information about Material 3, including guidelines, principles, and inspiration visit <https://m3.material.io/>.

{% hint style="info" %}
**Examples**

Examples of many of the UI components are available in our [Showroom](https://showroom.appfarm.app/ui-components). You can view the demos, as well as access the setup in Appfarm Create. Don't have access? [Register](https://showroom.appfarm.app/sign-up).
{% endhint %}

You can add UI Components to your UI with drag & drop, by clicking the UI Component (will add it after the selected UI Component inside the selected View/Dialog/Drawer), or by using [Appfarm Commander](/reference/appfarm-create/appfarm-commander.md) (CTRL + k / CMD + k -> Seach by name -> Add the UI Component).

## **Layout**

Layout components form the hierarchy of a view and are used to display content and navigation.

* [Container](/library/ui-components/container.md)
* [View container](/library/ui-components/view-container.md)
* [Coded component](/library/ui-components/coded-component.md)&#x20;
* [Iframe](/library/ui-components/iframe.md)
* [Tabs](/library/ui-components/tabs.md)
* [Bottom navigation](/library/ui-components/bottom-navigation.md)
* [Visibility group](/library/ui-components/visibility-group.md)
* [Popover](/library/ui-components/popover.md)&#x20;
* [Menu List](/library/ui-components/menu-list.md)

## **Data input**

Data input components enable the user to enter and select data of various types. They can be used to build forms, client filters, and other UI features that rely on user interaction.

* [Text edit](/library/ui-components/text-edit.md)
* [Date & time picker](/library/ui-components/date-and-time-picker.md)
* [Checkbox](/library/ui-components/checkbox.md)
* [Switch](/library/ui-components/switch.md)
* [Radio buttons](/library/ui-components/radio-buttons.md)
* [Select](/library/ui-components/select.md)
* [Multi select](/library/ui-components/multi-select.md)
* [Slider](/library/ui-components/slider.md)
* [Drawable canvas](/library/ui-components/drawable-canvas.md)
* [Rich text editor](/library/ui-components/rich-text-editor.md)

## **Data iterators**

Data iterator components are used to display data from multiple objects in a data source.

* [Table](/library/ui-components/table.md)
* [List](/library/ui-components/list.md)
* [Avatar group](/library/ui-components/avatar-group.md)
* [Chip group](/library/ui-components/chip-group.md)

## **Buttons**

Button components are used to add interactivity and provide the user an opportunity to trigger an action.

* [Button](/library/ui-components/button.md)
* [Icon button](/library/ui-components/icon-button.md)
* [Floating action button](/library/ui-components/floating-action-button.md)
* [Speed dial](/library/ui-components/drawable-canvas-1.md)

## **Visuals**

Visual components are used to display both static and interactive data.

* [Text](/library/ui-components/text.md)
* [Icon](/library/ui-components/icon.md)
* [Image](/library/ui-components/image.md)
* [Avatar](/library/ui-components/avatar.md)
* [Map](/library/ui-components/map.md)
* [PDF reader](/library/ui-components/pdf-reader.md)
* [Circular progress](/library/ui-components/circular-progress.md)
* [Linear progress](/library/ui-components/linear-progress.md)
* [Animated component](/library/ui-components/animated-component.md)

## **Basic charts**

Basic chart components are used to visualise data. For additional customization options, see [advanced charts](#advanced-charts).

* [Basic line](/library/ui-components/basic-line-chart.md)
* [Basic bar](/library/ui-components/basic-bar-chart.md)
* [Basic pie](/library/ui-components/basic-pie-chart.md)
* [Basic gauge](/library/ui-components/basic-gauge-chart.md)

## **Advanced charts**

Advanced chart components are used to visualise data and have more customization options compared to [basic charts](#basic-charts). To get a better understanding of how charts are configured, see [Understand charts](/how-to/user-interface/understand-charts.md).

{% hint style="warning" %}
**Important**

All solutions have access to try advanced charts, but use of an advanced chart in Production is determined by your subscription tier.
{% endhint %}

* [Line/area](/library/ui-components/advanced-line-chart.md)
* [Bar](/library/ui-components/advanced-bar-chart.md)
* [Scatter plot](/library/ui-components/advanced-scatter-plot-chart.md)
* [Bubble](/library/ui-components/advanced-bubble-chart.md)
* [Pie](/library/ui-components/advanced-pie-chart.md)
* [Heatmap](/library/ui-components/advanced-heatmap-chart.md)
* [Solid gauge](/library/ui-components/advanced-solid-gauge-chart.md)
* [Gantt](/library/ui-components/advanced-gantt-chart.md)
* [Combined](/library/ui-components/advanced-combined-chart.md)


---

# 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.appfarm.io/library/ui-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.