# Creating a new component

This page provides instructions on how to create a new UI component in a Caplin Trader application.

Caplin CLI can create scaffolding for a blank component and a React component.

## Requirements

Caplin Trader UI components are created in the context of a Caplin Trader application. For more information on creating Caplin Trader applications, see [Creating a new application](creating-a-new-application.md).

## Creating a blank component

You create a blank component using Caplin CLI’s `create-component` command from the root directory of your application:

```
$ caplin-cli create-component <component-name>
```

To create a blank component called MyBlankComponent, for example, follow the steps below:

1. From the root directory of your CT5 application (`<workspace>/apps/<app-name>`), run the command below to create a new blank component called MyBlankComponent:

   ```
   $ caplin-cli create-component MyBlankComponent
   ```
2. When prompted to select the type of component to create, select **blank**.
3. When prompted to select the location of the new component, select **src**.

The `caplin-cli` tool creates a directory for your new component with the following structure:

```plantuml
@startsalt
scale 1.25
{
{T
 + <color:goldenrod><&folder></color> ct-workspace
 ++ <color:goldenrod><&folder></color> apps
 +++ <color:goldenrod><&folder></color> MyApp
 ++++ <color:goldenrod><&folder></color> src
 +++++ <color:goldenrod><&folder></color> MyBlankComponent
 ++++++ <color:goldenrod><&folder></color> ~__tests__
 +++++++ <color:cornflowerblue><&file></color> component-test.js
 ++++++ <color:cornflowerblue><&file></color> component.js
}
}
@endsalt
```

## Creating a React component

You create a React component using Caplin CLI’s `create-component` command from the root directory of your application:

```
$ caplin-cli create-component <component-name>
```

To create a React component called MyReactComponent, for example, follow the steps below:

1. From the root directory of your CT5 application (&lt;workspace>/apps/&lt;app-name>), run the command below to create a new React component called MyReactComponent:

   ```
   caplin-cli create-component MyReactComponent
   ```

   **📌 NOTE**\
   The name of a React component must begin with a capital letter.
2. When prompted to select the type of component to create, select **react**.
3. When prompted to select the location of the new component, select **src**.

The `caplin-cli` tool creates a directory for your new component with the following structure:

```plantuml
@startsalt
scale 1.25
{
{T
 + <color:goldenrod><&folder></color> ct-workspace
 ++ <color:goldenrod><&folder></color> apps
 +++ <color:goldenrod><&folder></color> MyApp
 ++++ <color:goldenrod><&folder></color> src
 +++++ <color:goldenrod><&folder></color> MyReactComponent
 ++++++ <color:goldenrod><&folder></color> stories
 +++++++ <color:cornflowerblue><&file></color> index.js
 ++++++ <color:goldenrod><&folder></color> ~__tests__
 +++++++ <color:cornflowerblue><&file></color> MyReactComponent-test.js
 ++++++ <color:cornflowerblue><&file></color> MyReactComponent.js
 ++++++ <color:cornflowerblue><&file></color> MyReactComponent.scss
}
}
@endsalt
```