---
tags:
- UI Page widgets
alias: user-guide-uipage-widgets-component
widgetname: Component
description: "This documentation explains how to utilize and customize UI components within a page"
---

# Component

![componentIcon](images/uiComponent.png)

## Overview

The Component widget allows you to access any of the available Critical Manufacturing base visual components (or user-created components) and insert them in a UI Page, thus avoiding the need to create a separate widget for each of the possible application components. This provides the possibility of rendering both simple and complex widgets available elsewhere in the application realm.

## General Steps

{% include-markdown 'includes/pages/ui_widgets_general_steps_with_behavior.md' %}

![Screenshot showing settings for a Wadget Component.](images/component_general.png)

## Widget Customization

1. Optionally, in the **Style** tab, you can define a Border Width and Color.

    ![componentStyle](images/component_style.png)

2. In the **Component** tab, you can choose the desired component and customize its appearance, by defining the following settings:

    * **Package** - Select the package where the desired component is located.
    * **Component** - Choose the specific component you wish to use from the selected package.
    * **Component full size** - Determine whether the component should be displayed at its full size.  This option is set to `false` by default.
    * **Horizontal Padding** - Set the padding for the component's left and right sides, measured in pixels (px). This defines the horizontal spacing around the component.
    * **Vertical Padding** - Set the padding for the component's top and bottom sides, measured in pixels (px). This defines the vertical spacing around the component.

    ![componentWidget](images/component_widget.png)

3. Optionally, define the **Links** between this widget and other elements of the UI Page.

    ![componentWidget](images/component_links.png)

4. By saving and closing the settings, the widget will be changed accordingly.