---
title: "Register a component in the component map"
slug: "register-a-component-in-the-component-map"
abstract: "Learn how automatic component map generation works and how to manually register a component in the component map if required."
---
# Register a component in the component map

A component map contains a list of all the components in your Content SDK app. Each component is mapped to a corresponding component within SitecoreAI, allowing marketers to [use it in Pages](https://doc.sitecore.com/sai/en/users/sitecoreai/build-pages/adding-components-to-a-page/add-or-remove-an-element-in-a-page.html). You can view the component map at `.sitecore/component-map.ts`. By default, Content SDK generates a component map when you execute the `build` and `dev` scripts.

The following code snippets shows the structure of a component map in a Content SDK app that contains imports for the built-in components, components from the app itself, and other components. The component name is written first, followed by the imported component itself:

```ts
// Below are built-in components that are available in the app, it's recommended to keep them as is
import { AngularContentSdkComponent } from '@sitecore-content-sdk/angular';

import { ScFormComponent } from '@sitecore-content-sdk/angular';
// end of built-in import section
import * as TitleComponent from 'src/app/components/title.component';
import * as CdpPageViewcomponent from 'src/app/components/content-sdk/cdp-page-view.component';

export const componentMap = new Map<string, AngularContentSdkComponent>([
  ['Form', ScFormComponent],
  ['Title', { ...TitleComponent }],
  ['CdpPageView', { ...CdpPageViewcomponent }],
]);

export default componentMap;
```

## Component map configuration

The configuration for automatic component map generation lives inside the `sitecore.cli.config.ts` file. Out-of-the-box, the configuration is as shown:

```ts
componentMap: {
    paths: ['src/components'],
},
```

This configuration generates the component map using all the components that live inside `src/components`. In addition to the paths parameter, the `componentMap` object also allows the following parameters:

- `exclude`
- `destination`
- `componentImports`
- `mapTemplate`

See the table below for detailed descriptions of these parameters and their types:

<table style="width:100%;" class="informaltable frame-void rules-rows"><thead><tr><th class="th"><p>Property</p></th><th class="th"><p>Type</p></th><th class="th"><p>Description</p></th></tr></thead><tbody><tr><td class="td"><p><code class="code">paths</code></p></td><td class="td"><p><code class="code">string[]</code></p></td><td class="td"><p>Provide a list of paths (glob or otherwise) for the component map to pull and register components from. One component is imported per component file to support SXA variants.</p><p>For example, in the default starter kit app, a component is imported as shown:</p><pre class="programlisting ts" data-language="ts" id="UUID-abf17996-3116-a4ea-f937-4cd66669d05d_programlisting-id135682408246819"><code class="language-ts" data-language="ts">import * as CdpPageView from 'src/components/CdpPageView';</code></pre></td></tr><tr><td class="td"><p><code class="code">exclude</code></p></td><td class="td"><p><code class="code">string[]</code></p></td><td class="td"><p>Provide a list of rules (provided as glob paths) to exclude components from being registered. The logic considers all components under <code class="code">paths</code> and then removes the ones matching from <code class="code">exclude</code>.</p></td></tr><tr><td class="td"><p><code class="code">destination</code></p></td><td class="td"><p><code class="code">string</code></p></td><td class="td"><p>Provide a custom destination folder for the generated <code class="code">component-map.ts</code> file. The default destination is the <code class="code">.sitecore</code> folder.</p>[!warning]<br>> If you modify this property, ensure that the component-map imports reference the new location.</td></tr><tr><td class="td"><p><code class="code">componentImports</code></p></td><td class="td"><p><code class="code">ComponentImport[]</code></p></td><td class="td"><p>Fine tune your component imports within the component map or add components from module dependencies.</p><p>For example, to import some components from a package and create a named import, use the below <code class="code">ComponentImport</code> definition:</p><pre class="programlisting ts" data-language="ts" id="UUID-abf17996-3116-a4ea-f937-4cd66669d05d_programlisting-id135682409845074"><code class="language-ts" data-language="ts">{
  importName: 'MyPackageImport',
  importInfo: {
    importFrom: '@my/package/import',
    namedComponents: ['NamedA', 'NamedB'],
  },
},</code></pre><p>This imports <code class="code">NamedA</code> and <code class="code">NamedB</code> into the component map as shown:</p><pre class="programlisting ts" data-language="ts" id="UUID-abf17996-3116-a4ea-f937-4cd66669d05d_programlisting-id13568241029647"><code class="language-ts" data-language="ts">import { NamedA, NamedB } from '@my/package/import';</code></pre><p>You can also use individual <code class="code">ComponentImport</code> entries to import components as SXA components from your local app:</p><pre class="programlisting ts" data-language="ts" id="UUID-abf17996-3116-a4ea-f937-4cd66669d05d_programlisting-id135682410717128"><code class="language-ts" data-language="ts">{
  importName: 'LocalSXAComponent',
  importInfo: {
    importFrom: 'src/components/LocalSxaComponent',
  },
},</code></pre><p>This imports <code class="code">LocalSXAComponent</code> into the component map as shown:</p><pre class="programlisting ts" data-language="ts" id="UUID-abf17996-3116-a4ea-f937-4cd66669d05d_programlisting-id135682411121193"><code class="language-ts" data-language="ts">import * as LocalSXAComponent from 'src/components/LocalSxaComponent';</code></pre></td></tr><tr><td class="td"><p><code class="code">mapTemplate</code></p></td><td class="td"><p><code class="code">(components: ComponentFile[], componentImports?: ComponentImport[]) => string</code></p></td><td class="td"><p>Provide an override for the function that forms the component-map template. It accepts component definitions for component files parsed from the <code class="code">paths</code> parameter and component import definitions from the <code class="code">componentImports</code> parameter. It should return a string with the contents of <code class="code">component-map.ts</code>.</p></td></tr></tbody></table>

## Registering a component manually

You can also manually manage component maps. Before doing so, make sure your SitecoreAI environment [has the component you intend](https://doc.sitecore.com/sai/en/developers/sitecoreai/content-modeling-and-presentation/sitecoreai-for-developers/content-editor-items/components/copy-and-customize-a-component.html) to map your component to. Also, ensure you've turned off automatic component map generation by removing the following from the `build` and `dev` scripts:

```ts
sitecore-tools:generate-map
```

To register a component, import the component and its variants to the component map.

```ts
import * as MyComponent from 'src/components/MyComponent';
```

## Configure using one or more variants

If you're importing a component and you want to include variants, name the original component the `Default` variant and add variant names for variant imports.

In the following example, the `Default` component has a standard variant named `Variant1`.

```ts
import Variant1 from 'src/components/variant.component';
import TitleComponent from 'src/app/components/title.component';
...
const MyVariantComponent = {
  ...
  Default: TitleComponent,
  Variant1: Variant1,
};
```