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.

📘

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.

Creating a Component from an Existing Composition

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

The new component option once the component is clickedThe new component option once the component is clicked

The "new component" option

Naming the componentNaming the component

Naming the Component

Give the Component a name and click 'Submit.'

The new component space listed in the Components spaceThe new component space listed in the Components space

The new component space listed in the Components space

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.

MyTextComponent with the "In library icon"MyTextComponent with the "In library icon"

MyTextComponent with the "In library icon."

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.

Add New component option highlightedAdd New component option highlighted

Add a New component option highlighted

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.

Add new component modalAdd new component modal

Add new component modal

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."

Add new component modal with component name and Composition selectedAdd new component modal with component name and Composition selected

Add new Component modal with component name and Composition selected

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.

Newly created Composition component in the Components spaceNewly created Composition component in the Components space

Newly created Composition component in the Components space

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.

Counter ComponentCounter Component

Counter Component

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.

Counter Component CompositionCounter Component Composition

Counter Component Composition

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.

Component LogicComponent Logic

Component Logic

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.

Code ComponentCode Component

Code Component


More Info

📘

Component Logic

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