Components can be thought of as building blocks and represent the different pieces you can snap together to build a website. These might be visual pieces: buttons, pages, etc, or even bits of logic. Clutch allows you to work with components visually in your canvas and composition pane.


React Components

Clutch components are built on top of React. To see Reacts definition on components or to learn more about React check out their docs.

Components in Clutch.

Components and Component Instances

Components are the piece itself, unlike toy building blocks, using one doesn't consume it, you can use as many as you'd like.

When you use a component, you create an instance of that component. Component instances are the components you see in the composition view and the canvas, and on which you set properties on the properties pane.


Components that you can make instances of will live either in your Project Components panel or come from the marketplace.

Project Components

The Project Component panel will show components that were made in that current project. Here you can Rename, Edit definition, Delete, and Duplicate your components.

Component Instances

The composition view shows each workspaces' frames and their contents, those being structures of component instances.

Components in the composition view are shown as rows that feature the Component Name in a pill alongside the instance name. If the component accepts children, it will have a leading collapse-arrow indicator. Likewise, if the component has its own composition, the pill will be solid instead of outlined, meaning this component can be edited.