> ## Documentation Index
> Fetch the complete documentation index at: https://help.clueso.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Grouping & Components

> Learn how to group elements, nest layouts, apply bulk updates, and create reusable components.

<iframe src="https://watchclueso.com/embed/mbg3w9njoc9hbb9d" frameBorder="0" webkitAllowFullScreen mozAllowFullScreen allowFullScreen style={{ width: "100%", aspectRatio: "16/9", border: 0 }} allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" />

This guide explains how to group elements so they move and scale as a single unit. It also covers nesting groups, applying bulk updates to similar elements, and saving components that can be reused across projects.

## Create Groups

Grouping allows multiple elements to move, scale, and behave as a single unit.

<Steps>
  <Step>
    Drag to select the elements you want to group.

    <Frame>
      <img src="https://mintcdn.com/clueso/O8gogC3XyRpG-rUR/images/Drag-Select.gif?s=47ce16db634fdacd762c2096e66b60f0" alt="Drag Select" width="1280" height="708" data-path="images/Drag-Select.gif" />
    </Frame>
  </Step>

  <Step>
    Right-click and choose **Group selection** to combine them into a single unit.

    <Frame>
      <img src="https://mintcdn.com/clueso/O8gogC3XyRpG-rUR/images/Group-Selection-1.png?fit=max&auto=format&n=O8gogC3XyRpG-rUR&q=85&s=ff646125616044bd62c2d7e19dfe54aa" alt="Group Selection 1" width="2630" height="1455" data-path="images/Group-Selection-1.png" />
    </Frame>
  </Step>

  <Step>
    Once grouped, the elements move and scale together while keeping their alignment intact.

    <Frame>
      <img src="https://mintcdn.com/clueso/YLikq9-EzrjfQVmD/images/move-and-scale.gif?s=3078fa80c42daa0dacaf41ad58996652" alt="Move And Scale" width="1280" height="708" data-path="images/move-and-scale.gif" />
    </Frame>
  </Step>
</Steps>

## Nest Groups

Groups can also be nested to help organize more complex layouts.

<Steps>
  <Step>
    Select existing groups and group them again to create a parent group.

    <Frame>
      <img src="https://mintcdn.com/clueso/aSrzk-DufZ_90If6/images/group-groups.gif?s=a622e94cbd2bce36a9d1bfe82c7a7d88" alt="Group Groups" width="1280" height="708" data-path="images/group-groups.gif" />
    </Frame>
  </Step>

  <Step>
    In the timeline, you can see each group and what it contains, making it easier to manage larger layouts.

    <Frame>
      <img src="https://mintcdn.com/clueso/YLikq9-EzrjfQVmD/images/nesting-timeline.gif?s=19de12ddcafc115186caa896c448ee89" alt="Nesting Timeline" width="1280" height="708" data-path="images/nesting-timeline.gif" />
    </Frame>
  </Step>
</Steps>

## Make Bulk Updates

Bulk editing allows you to update similar elements inside a group at once.

<Steps>
  <Step>
    Select a group to access similar elements inside it.

    <Frame>
      <img src="https://mintcdn.com/clueso/O8gogC3XyRpG-rUR/images/Bulk-step-1.gif?s=fc97d6cddc474997e25dad1b15f500b9" alt="Bulk Step 1" width="1280" height="708" data-path="images/Bulk-step-1.gif" />
    </Frame>
  </Step>

  <Step>
    Apply updates such as underline, font changes, or spacing adjustments across all matching elements. Bulk editing works for similar element types within the selected group.

    <Frame>
      <img src="https://mintcdn.com/clueso/qU5DLkjsoHezefrI/images/bulk-step-2.gif?s=5cd63ffe66d611aa776347d85b012b2e" alt="Bulk Step 2" width="1280" height="708" data-path="images/bulk-step-2.gif" />
    </Frame>
  </Step>
</Steps>

## Create Components

Save frequently used layouts as reusable components.

<Steps>
  <Step>
    Once your layout is ready, select the group and choose **Save as Component**.

    <Frame>
      <img src="https://mintcdn.com/clueso/YLikq9-EzrjfQVmD/images/save-as-component.gif?s=2f2c3e817b8594dd8006261bebcdc6ce" alt="Save As Component" width="1280" height="708" data-path="images/save-as-component.gif" />
    </Frame>
  </Step>

  <Step>
    Give it a clear name and click **Save Component**.

    <Frame>
      <img src="https://mintcdn.com/clueso/YLikq9-EzrjfQVmD/images/name-component.png?fit=max&auto=format&n=YLikq9-EzrjfQVmD&q=85&s=edeedecfa3c44fff12e0228cd78f7303" alt="Name Component" width="3420" height="1892" data-path="images/name-component.png" />
    </Frame>
  </Step>

  <Step>
    The saved component will appear under the **Elements** tab and can be reused across projects to maintain consistency.

    <Frame>
      <img src="https://mintcdn.com/clueso/YLikq9-EzrjfQVmD/images/resuse-components.png?fit=max&auto=format&n=YLikq9-EzrjfQVmD&q=85&s=5c963f2b903b0ae1cc4c536d9c1b4987" alt="Resuse Components" width="3420" height="1892" data-path="images/resuse-components.png" />
    </Frame>
  </Step>
</Steps>

That’s how you group elements, organize layouts, and create reusable components to work faster and stay consistent.
