# UI components

Appfarm Create includes a library of UI components to enable you to quickly build a [user interface](https://docs.appfarm.io/reference/apps/ui) and connect it to your [data](https://docs.appfarm.io/reference/apps/data) and [actions](https://docs.appfarm.io/reference/actions). 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](https://docs.appfarm.io/reference/appfarm-create/appfarm-commander) (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](https://docs.appfarm.io/library/ui-components/container)
* [View container](https://docs.appfarm.io/library/ui-components/view-container)
* [Coded component](https://docs.appfarm.io/library/ui-components/coded-component)&#x20;
* [Iframe](https://docs.appfarm.io/library/ui-components/iframe)
* [Tabs](https://docs.appfarm.io/library/ui-components/tabs)
* [Bottom navigation](https://docs.appfarm.io/library/ui-components/bottom-navigation)
* [Visibility group](https://docs.appfarm.io/library/ui-components/visibility-group)
* [Popover](https://docs.appfarm.io/library/ui-components/popover)&#x20;
* [Menu List](https://docs.appfarm.io/library/ui-components/menu-list)

## **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](https://docs.appfarm.io/library/ui-components/text-edit)
* [Date & time picker](https://docs.appfarm.io/library/ui-components/date-and-time-picker)
* [Checkbox](https://docs.appfarm.io/library/ui-components/checkbox)
* [Switch](https://docs.appfarm.io/library/ui-components/switch)
* [Radio buttons](https://docs.appfarm.io/library/ui-components/radio-buttons)
* [Select](https://docs.appfarm.io/library/ui-components/select)
* [Multi select](https://docs.appfarm.io/library/ui-components/multi-select)
* [Slider](https://docs.appfarm.io/library/ui-components/slider)
* [Drawable canvas](https://docs.appfarm.io/library/ui-components/drawable-canvas)
* [Rich text editor](https://docs.appfarm.io/library/ui-components/rich-text-editor)

## **Data iterators**

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

* [Table](https://docs.appfarm.io/library/ui-components/table)
* [List](https://docs.appfarm.io/library/ui-components/list)
* [Avatar group](https://docs.appfarm.io/library/ui-components/avatar-group)
* [Chip group](https://docs.appfarm.io/library/ui-components/chip-group)

## **Buttons**

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

* [Button](https://docs.appfarm.io/library/ui-components/button)
* [Icon button](https://docs.appfarm.io/library/ui-components/icon-button)
* [Floating action button](https://docs.appfarm.io/library/ui-components/floating-action-button)
* [Speed dial](https://docs.appfarm.io/library/ui-components/drawable-canvas-1)

## **Visuals**

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

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

## **Basic charts**

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

* [Basic line](https://docs.appfarm.io/library/ui-components/basic-line-chart)
* [Basic bar](https://docs.appfarm.io/library/ui-components/basic-bar-chart)
* [Basic pie](https://docs.appfarm.io/library/ui-components/basic-pie-chart)
* [Basic gauge](https://docs.appfarm.io/library/ui-components/basic-gauge-chart)

## **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](https://docs.appfarm.io/how-to/user-interface/understand-charts).

{% 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](https://docs.appfarm.io/library/ui-components/advanced-line-chart)
* [Bar](https://docs.appfarm.io/library/ui-components/advanced-bar-chart)
* [Scatter plot](https://docs.appfarm.io/library/ui-components/advanced-scatter-plot-chart)
* [Bubble](https://docs.appfarm.io/library/ui-components/advanced-bubble-chart)
* [Pie](https://docs.appfarm.io/library/ui-components/advanced-pie-chart)
* [Heatmap](https://docs.appfarm.io/library/ui-components/advanced-heatmap-chart)
* [Solid gauge](https://docs.appfarm.io/library/ui-components/advanced-solid-gauge-chart)
* [Gantt](https://docs.appfarm.io/library/ui-components/advanced-gantt-chart)
* [Combined](https://docs.appfarm.io/library/ui-components/advanced-combined-chart)