Components interface and types
Component Interface

component interface
Let's understand the interface:
- Expand/Collapse arrow - If the Component accepts children or has composition, it will have a leading expand/ collapse-arrow indicator.
- Component type icon - There are three different components to work with in Clutch.
- A Cloud component
cloud icon
(components installed from the component cloud) - A Composition Component
building block icon
(a component defined by other components). - A Code Component
code icon
(a component defined by React.js code)
- A Cloud component
- Component Name - The Name of the Component at creation.
- Close Composition Icon - If a composition component shows its composition, this icon will indicate that the components below are part of the composition. Close it if you do not want to edit it.
- Component Instance Name - You can add an instance name to any component. The instance name is a unique name you can change to help keep your component tree organized or provide a clearer understanding of what that 'branch' of components does. If you do not provide an instance name, it will default to the
Component Name
. - Component in composition - Will be outlined in a violet color when hovered and solid violet when selected.
Components
Components are the building blocks of Clutch and creating your application.
Cloud Component
The Clutch Team creates cloud components installed in your project from the Clutch Cloud these components for ease of use. The cloud icon identifies these components.

Cloud component
Composition Component
A Composition Component is a component created from other components. In the example below the MyCustomComponent
is made of 3 different components that define it. Composition components are identified by the building block icon, signifying that the Component contains other components. The building block icon identifies these components.

Composition component
Code Component
Code components are custom components you can create in any project. These components allow you to write your custom code to define it. The code icon identifies these components.

Code component
Components in the composition tree
Nesting Components
Components that accept children will have a collapsible arrow indicator to the left of their name.

A frame labeled "My Frame" contains a Box component containing a Text component.
Slots
Some components accept multiple children in various slots, for example, the Input
component from Clutch UI Kit has numerous places that render an adornment in either the tailing or leading position (or, in this example, both).
A Slot will have the slot icon (dashed box).

Tailing and leading adornment on the input component
Component Composition
When you double-click a composition component to edit/alter the composition, the Component will have an x
to signify that you are in the composition and provide a way to close it. The Composition tree will highlight the Composition Components in violet rather than blue.

MyCustomComponent showing the composition
Component Actions

component actions
Right-clicking, or clicking on the context menu of each Component's row, presents the following actions:
- New Component - Takes the selected Component and creates a new one from it and its children.
- Wrap in - Choose to wrap the Component in an
If
orLoop
logic primitive (This is discussed more in the logic primitives section) - Cut
- Copy
- Paste
- Duplicate
- Apply Component preset - This will set the selected Component to the default options applied on the preset Component marked for the library.
Add to library - This will add the Component to the library - Rename Instance - Change the component instance name in the project
- Remove Template - Deletes the Template.
- Change component type- Allows you to change the component type. For example, you can select a
Box
component and change it to aTypography
component. - Delete Instance - Removes Instance from the composition but does not delete the Component from the project.
Composition Component Actions

Composition Component actions
If the composition of your Component is showing and you right-click the Component, The Component Actions menu will show you some additional options.
Component actions
- Hide composition - This is the same as clicking the back arrow.
- Rename Component - this renames the Component, not the Instance, project-wide.
- Edit documentation - opens the component documentation viewer.
- Remove Component - removes the Component from the project.
More Info
Proper Component naming convention
When creating and naming a
new component
users will need to create a name in PascalCase.When changing a component
instance
name it is recommended to either use kebab-case or camelCase and provide an incremented integer for each occurring instance.
Watch on YouTube an overview of Composition Panel
Updated 2 months ago