# Components

Components are the building blocks of Noloco. They can be added to [Record Pages](https://guides.noloco.io/data-to-app#row-record-page) and [Blank Pages](https://guides.noloco.io/pages/blank-pages) to truly customize your app.

Components display and let your app's users interact with data in different and powerful ways.

For example, the **Collection** component can show multiple data records, in different layout styles, like **Table, Kanban Board, Cards,** while other components, like the **Stages,** will only display one field value at a time.

You can see which components are visible on your page, add new components, and manage their order from the left side of the **Build Mode Sidebar**.

To edit a component, switch on **Build Mode** and then simply click the component you want to edit - this will open the **Build Mode Sidebar** for that component.

### Supported Components

Noloco supports a wide range of components that can help you display and edit your app's data with ease.

* **Title** Add a title, subtitle, or some action buttons to your page. The title component is very useful for adding context to other components on the page. The *subtitle* field supports Markdown, which allows you to get very flexible with the styling and content of your title.
* **Collection** Adds a list or table of records that can be related to the page's record when on a [Record Page](https://guides.noloco.io/data-to-app#row-record-page). This can be very useful for displaying related records, such as the Tasks on a Project.
* **Details** Add record fields to your page to display and update your data. Perhaps the most versatile component, the Details component presents you with a list of fields that you can display and customize individually. The details block can also let your users edit the field values by enabling inline editing on a field.

  You can also display the field with the following supported **Display as** options:

  * Default
  * Link
  * Button
  * Image
  * Markdown / Richtext
  * Formatted JSON
  * QR Code
  * Bold
  * Headings (H1 - H4)

  Dates:

  * Relative days (time since date)
* **Highlights** Adds a card that highlights your selected fields. Highlights allow you to present the most important information in a larger format. Note that fields in the highlight component are not editable.
* **Video** Adds a video element to your page that can be powered by a file field or a custom URL.
* **Iframe** Embed an iframe on your app's page, where the iframe URL is powered by a field or a custom URL.
* **Stages** Display a Single Option field's value in a stages element, useful for things like a Project's status or a lead's status.
* **Chart** Add a chart group to your page that can be powered by the related data Read more about [Charts](https://github.com/noloco-io/guides/blob/main/views/display/charts.md)
* **Buttons** Add a group of action buttons to quickly take action on the data on the page. Read more about [Action Buttons](https://guides.noloco.io/actions/action-buttons)
* **Links** Add a visually appealing set of links to link your app's users to specific parts of the app, or to external links like your companies support page.
* **Text** Similar to the **Title** component, the **Text** component adds a markdown compatible text block to your page that you can customise with dynamic values.
* **Gallery** Showcase a file field on your page, for single files, it just shows the file, for multiple files, it allows your users to browse through the files.
* **Notice** Add a notice to your project to draw the users' attention to a specific piece of content. Customise the appearance of your notices by setting the appearance to be `Primary`,`Success`,`Warning`, `Danger`or `Default`, and by adding an optional icon.
* **Divider** Add a divider to your page to create some visual breathing space and to break sections up into logical groups.
* **Comments** Make your records interactive with our powerful Comments component. Users get a full rich-text editor with the ability to add attachments and customise notifications.
* **Image** Add images to your project using this component. You have the option to either upload the file, specify the file URL, or link to a file field in one of your tables.
* **Embed** Embed content from third-party sites using iFrames with this component.
* **Container** Group multiple sections or components together on your pages. Read more about [Containers](https://guides.noloco.io/components/containers)

### Configuring Components

The configuration options of your component will depend on what component you are customizing. Generally, most components have some or all of the following setting groups:

* **Data** Control which data is shown or used in your components
* **Actions** Some components, such as the Title, Action Buttons, or Details section allow you to configure [Action Buttons](https://guides.noloco.io/actions/action-buttons) on the component
* **Visibility rules** Configure whether the component should be visible at all times, or dependent on page values, or user role. [Read more](https://guides.noloco.io/charts/overview#line-charts). Visibility rules are present on all components.

### Adding a component

To add a component, make sure **Build Mode** is enabled. On the page you want to add a component, there should be a dotted outlined box with all of the components that you can add to the page.

Simply choose the component you want, and it will be added to the page.

If you don't see this box, then you are either on a [View](https://guides.noloco.io/pages/views) or you are not in **Build Mode.**

{% @arcade/embed url="<https://app.arcade.software/share/HANawLJHY6cITYktamrC>" flowId="HANawLJHY6cITYktamrC" %}

### Moving Components

You can re-order the components on a page from either the **Build Mode Sidebar** or by dragging and dropping the components into a new order using the drag handle of the selected components.

{% @arcade/embed url="<https://app.arcade.software/share/YPlbMLOOLACIQ5xTjqhO>" flowId="YPlbMLOOLACIQ5xTjqhO" %}

### Removing Component

When you delete a component, they don't affect the data in your app. It just deletes the component that was showing that data. You can use Command Z (Mac) or Control Z (PC) to undo any of your actions at any time, including deleting a component.

To delete a component simply use the Trash can icon on the selected component.

{% @arcade/embed url="<https://app.arcade.software/share/DthxbjrGfCLYuYYaEB7X>" flowId="DthxbjrGfCLYuYYaEB7X" %}