> For the complete documentation index, see [llms.txt](https://docs.blup.in/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.blup.in/wiki/design-ui/right-click-menu-in-design.md).

# Right-Click Menu in Design

The Right-Click Menu in **Design** provides a comprehensive set of functionalities for efficiently managing and manipulating components within your project.

You just have to right-click in Design, the menu will appear.

<figure><img src="/files/LAjhqY2J03ir4vuK8ZxP" alt="right-click menu"><figcaption><p>right-click menu</p></figcaption></figure>

### **Add Logic**

Opens the Logic Panel, a robust system enabling the creation of logical workflows around designs and interactions. The Logic Panel supports a diverse range of nodes, including variables (e.g., strings, integers) and SDKs hosted on **pub.dev.**

<figure><img src="/files/5HCzsfuGVSbzIOmGz3aD" alt="add logics"><figcaption><p>Add Logics</p></figcaption></figure>

### **Copy, Paste, and Delete**

#### Copy

Duplicates the selected component, including its entire structure such as containers, texts, and widgets. This feature is handy for replicating existing components within your design.

#### **Paste**

Inserts the previously copied component as a new independent instance. This allows for the creation of duplicates without affecting existing components, fostering flexibility in design.

#### **Delete**

Removes the selected component from the UI, deleting it entirely—a crucial function for component management and cleanup.

<figure><img src="/files/m61MvHqtXLOvMraTUXXi" alt=""><figcaption><p>Copy, Paste and Delete</p></figcaption></figure>

### **Copy and Paste Properties**

#### **Copy Properties**

Copies all properties of the selected component, excluding height, width, and widget-specific properties. This feature is useful for transferring styles and settings between components.

#### **Paste Properties**

Applies the copied properties to the selected component. This allows for the efficient transfer of styling and configuration settings.

<figure><img src="/files/NesynoFsREHoEpMd6VMU" alt=""><figcaption><p>Copy Paste Properties</p></figcaption></figure>

### **Copy Page, Paste Page, and Delete Page**

#### **Copy Page**

Duplicates the current page, facilitating the replication of entire layouts or structures.

#### **Paste Page**

Inserts the copied page as a new page, allowing for the seamless duplication of entire pages within your project.

#### **Delete Page**

Removes the current page and opens the last page before it. Useful for page management and navigation.

### **Sent Backward/Forward**

#### **Sent Forward**

Brings the selected component one layer above its current position in the layer hierarchy, adjusting the visual stacking order.

#### **Send Backward**

Pushes the selected component one layer below its current position in the layer hierarchy.

<figure><img src="/files/0YDlCohozldbe2l2afLf" alt=""><figcaption><p>Sent Backward/Forward</p></figcaption></figure>

### **Sent to Front/Back**

#### **Sent to Front**

Brings the selected component to the top layer of the UI, making it visually the foremost element.

#### **Sent to Back**

Pushes the selected component to the bottom layer of the UI, making it the visually rearmost element.

<figure><img src="/files/azOeG2yLRBplxiwrlIG8" alt=""><figcaption><p>Sent to Front/Back</p></figcaption></figure>

### **Group/Un-group**

#### **Group**

Groups one or more components together, creating a single top-level layer. Grouping facilitates the management of related elements as a unified entity.

#### **Ungroup**

Removes layers from the selected group, allowing for the disassociation of components within a group.

<figure><img src="/files/7AisAQaay3gcJeXG9FCT" alt="Group Un-group"><figcaption><p>Group Un-group</p></figcaption></figure>

### **ScrollView/Un-ScrollView**

#### **ScrollView**

Converts the currently selected component into a ScrollView—a view group used to make vertically scrollable views. Useful for creating scrollable sections within your design.

#### **Un-ScrollView**

Undo the ScrollView operation, reverting the selected component to its original state.

<figure><img src="/files/QQ8vfyORsh58Z4hXlrMu" alt="ScrollView-UnScrollView"><figcaption><p>ScrollView-UnScrollView</p></figcaption></figure>

### **ListView/Un-ListView**

#### **ListView**

Converts the selected components into a ListView widget, a versatile component for displaying a scrollable list of items.

#### **Un-ListView**

Undo the ListView operation, reapplying the conversion of selected components into a ListView.

<figure><img src="/files/qtfwVk71k97TBbXG8zJ9" alt="ListView-UnListView"><figcaption><p>ListView-UnListView</p></figcaption></figure>

### **PageListView/Un-PageListView**

#### **PageListView**

Creates a ListView of pages, allowing you to map indexes of the pages to different components. Users can navigate through these pages using the designated components.

#### **Un-PageListView**

Undoes the PageListView operation, reverting the selected component to its original state before the ListView of pages is applied.

<figure><img src="/files/DIU94kzXgWaR8F9B6d84" alt=""><figcaption><p>PageListView-UnPageListView</p></figcaption></figure>

#### Happy Learning!!

{% embed url="<https://open.spotify.com/playlist/0vvXsWCC9xrXsKd4FyS8kM?si=2c7f55bd3f944878>" %}
Lofi music
{% endembed %}