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

:core-static-generic-lg:{style="font-size: 100px"}

## Overview

The Component widget allows you to access 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.

!!! note
    This widget does not fully support all components. For specific use-cases, there is a risk of unexpected behavior, so proper testing is necessary. Alternatively, try specific widgets like [[user-guide-uipage-widgets-checklist]].

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