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
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 7 days ago