Composition Tree

Composition Tree

The composition tree is composed of frames and components.

composition treecomposition tree

composition tree


Frames are spaces into which you can drop components to see them rendered. Frames are the only top-level items allowed in compositions. They cannot be nested and may contain only components.

In the composition tree, frames have a Frame icon # followed by the frame name.

A frame labeled "My Frame"A frame labeled "My Frame"

A frame labeled "My Frame."

Frame Actions

Right-clicking a Frame, presents the following actions:

  • Copy
  • Paste
  • Duplicate
  • Rename
  • Delete
  • Set as Project Cover - Choose a frame for your dashboard to use as the project tile.
  • Add to the library - Adds the frame, including its components, as a template, selectable from the library.
Frame options menuFrame options menu

Frame options menu


Renaming Frames

When renaming a Frame in Clutch, most characters are allowed with the exception of / and \. These are reserved and will not allow the name change to save.


Components will live in the composition tree in 3 different ways:

  1. In the composition tree of a frame.
a component in a framea component in a frame

A component in a frame

  1. nested in other components as children.
nested componentnested component

Nested component

  1. or as part of a component's composition.
components part of the composition of a component.components part of the composition of a component.

Components in the composition of a component.

More info


Learn more about Composition


Watch on YouTube an overview of Composition Panel