# add-component

Learn how to install components into a project.

This action installs [components](/explanation/component) into the project, equivalent to the [`croct add component`](/reference/cli/commands/add-component) command.

A common pattern is to run it after [`create-resource`](/reference/cli/templates/actions/create-resource) to download the component files that were just provisioned in the workspace.

## Example

The following template creates a component in the workspace and installs it in the project:

**template.json5**

```json5
{
  "$schema": "https://schema.croct.com/json/v1/template.json",
  "title": "Top bar",
  "description": "Creates and adds a top bar component.",
  "actions": [
    {
      "name": "create-resource",
      "resources": {
        "components": {
          "top-bar": {
            "name": "Top bar",
            "schema": {
              "type": "structure",
              "attributes": {
                "message": {
                  "type": {
                    "type": "text"
                  },
                  "label": "Message",
                  "position": 0
                }
              }
            }
          }
        }
      }
    },
    {
      "name": "add-component",
      "components": ["top-bar"]
    }
  ]
}
```

## Properties

These are the supported properties:

- `name`: `string`

  The action identifier. Always `add-component` for this action.

- `components`: `Array<string>`

  The list of [components](/explanation/component) to install.

  Each entry can be in the format `id` or `id@version`. When the version is omitted, the latest version is used.

## Explore

- [Add slot](/reference/cli/templates/actions/add-slot): Learn how to add slots to your application.
- [Create resource](/reference/cli/templates/actions/create-resource): Learn how to create components and slots in a workspace.
- [Add dependency](/reference/cli/templates/actions/add-dependency): Learn how to add packages required by a component.
- [Integrate Croct](/reference/cli/templates/actions/integrate-croct): Learn how to set up the Croct integration.