Creating Components

There are two ways to create a component: using an existing composition of Components in a frame or creating a new Blank Component.

Creating a Component from an Existing Composition

Right-click on a Component in the tree and create a new Component from its hierarchy.

Give the Component a name and click 'Submit.'

You can find the new component root in the Components space. This space allows you to edit, change and document the Component from a single source of truth. The Component in this space is also the Component that is added and listed in the library. You will know that a component is in the library when it has the "In library icon" (book icon) to the right of the Component. You can learn more about the library and how to add and remove components to the library in the Library section of the docs.

Creating a New Blank Component

There are two ways to create a new Blank Component. You can choose to create a new Composition Component or a Code Component.

To create a new Blank Component, select the plus button next to the search bar in the composition panel.
Select New component.

You will see a modal that will ask for the component name and to choose if it will be a Composition component or a Code component.

New Composition Component

When creating a Composition Component, make sure that you have selected the composition component option.

Give the Component a name and click "Create."

Your created Component will be available in the component space that Clutch will create for you. The Component space is where you will edit the components documentation and configure its properties.

Now you will want to give the Component some composition. The Composition can be logic or render Components. In the example, I will show you a Counter Component I created that adds or subtracts one whole number from the initial value.

First, I am going to double-click the Component to open the Composition and then add the Components I need for my Counter Component. In this example, I will use the UseState Component from Clutch React Toolkit package, and one Box, one Typography, and two Button Components from the Clutch Ui Kit package.

Composition Components also allow you to add Logic directly to the Component using the Logic property in the Component configuration menu. Using the Logic property will enable you to add any logic directly to the Component and use any values returned in the Composition.

Code Component

You can also create Code Components. These components are comprised entirely of code and can return a single JSX element, Component, or even entire applications. Following the example above, I will create a counter using HTML elements and Logic.

After creating the Code Component, you can double-click the Component to view and change its definition.

In the example below, I have created a similar example to the Composition Component discussed earlier.

More Info

📘

Naming Components

When creating and naming a new component we recommend to use PascalCase.

When changing a component instance name, we recommend to either use kebab-case or camelCase and provide an incremented integer for each occurring instance.

📘

Component Logic

To learn more follow this link to the Component Logic documentation.