# Managing components


Use the following procedures to add, edit, and delete components in or from pages in the App Studio application studio to craft the desired user interface for your application.

# Adding components to a page


Use the following procedure to add a component to a page in App Studio. For information about duplicating an existing component, see [Duplicating components](duplicating-components.md).

1. If necessary, navigate to the Development environment of your application by editing it.

1. Navigate to the **Pages** tab.

1. The components panel is located in the right-side menu, which contains the available components.

1. Drag and drop the desired component from the panel onto the canvas. Alternatively, you can double-click on the component in the panel to automatically add it to the center of the current page.

1. Now that you've added a component, use the right-side **Properties** panel to adjust its settings, such as the data source, layout, and behavior. For detailed information about configuring each component type, see [Components reference](components-reference.md).

# Duplicating components


Use the following procedure to duplicate a component in an App Studio app. Duplicated components contain any linked automations or entities from the original component.

1. If necessary, navigate to the Development environment of your application by editing it.

1. Navigate to the **Pages** tab.

1. There are two ways to duplicate a component:
   + In the left-side **Pages** menu, expand the page that contains the component you want to duplicate. Choose the ellipses menu next to the name of the component you want to duplicate and choose **Duplicate**.
   + Choose the component you want to duplicate, and choose the duplicate icon.

   The duplicated component is added directly after the original component.
**Tip**  
You can undo a component duplication, along with many other actions in the Development environment, by using the CTRL\$1Z or CMD\$1Z keyboard shortcuts.

# Viewing and editing component properties


1. If necessary, navigate to the Development environment of your application by editing it.

1. Navigate to the **Pages** tab.

1. In the left-side **Pages** menu, expand the page that contains the component and choose the component to be viewed or edited. Alternatively, you can choose the page and then choose the component from the canvas.

1. The right-side **Properties** panel displays the configurable settings for the selected component.

1. Explore the various properties and options available, and update them as necessary to configure the component's appearance and behavior. For example, you might want to change the data source, configure the layout, or enable additional functionality.

   For detailed information about configuring each component type, see [Components reference](components-reference.md).

# Deleting components


1. If necessary, navigate to the Development environment of your application by editing it.

1. Navigate to the **Pages** tab.

1. In the left-side **Pages** menu, choose the component to be deleted to select it.

1. In the right-side **Properties** menu, choose the trash icon.

1. In the confirmation dialog box, choose **Delete**.