---
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 Sitecore AI, allowing marketers to [use it in Pages](https://doc.sitecore.com/sai/en/users/sitecoreai/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 non-dynamic 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 { BYOCWrapper, NextjsJssComponent, FEaaSWrapper } from '@sitecore-content-sdk/nextjs';
import { Form } from '@sitecore-content-sdk/nextjs';
// end of built-in components

// Components imported from the app itself
import * as CdpPageView from 'src/components/CdpPageView';
....
import * as Title from 'src/components/Title';

// Components must be registered within the map to match the string key with component name in Sitecore
export const componentMap = new Map<string, NextjsJssComponent>([
  ['BYOCWrapper', BYOCWrapper],
  ['FEaaSWrapper', FEaaSWrapper],
  ['Form', Form],
  ['CdpPageView', CdpPageView],
  [....],
  ['Title', Title],
]);

export default componentMap;
```

> [!tip]
> Automatic component map generation trades flexibility for simplicity. Advanced use-cases involving Next.js `dynamic()` imports require a self-managed component map. To disable automatic component map generation, remove the following from the `build` and `dev` scripts:
>
> ```bash
> sitecore-tools:generate-map
> ```

## 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:

```csharp
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>Parameter</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-0e8e4f45-7c29-642e-20eb-a84a5a3346af_programlisting-id135283387265693"><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><div dir="ltr" class="warning"><h3 class="title">Warning</h3><p>If you modify this property, ensure that the component-map imports reference the new location.</p></div></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" id="UUID-0e8e4f45-7c29-642e-20eb-a84a5a3346af_programlisting-id13528339784939" data-language="csharp"><code class="language-csharp" data-language="csharp">{
  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" id="UUID-0e8e4f45-7c29-642e-20eb-a84a5a3346af_programlisting-id135283398167453" data-language="text"><code class="language-text" data-language="text">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" id="UUID-0e8e4f45-7c29-642e-20eb-a84a5a3346af_programlisting-id135283403326172" data-language="csharp"><code class="language-csharp" data-language="csharp">{
  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" id="UUID-0e8e4f45-7c29-642e-20eb-a84a5a3346af_programlisting-id135283398461972" data-language="text"><code class="language-text" data-language="text">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[]) =&amp;gt; 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 manually manage component maps when working with advanced use-cases like Next.js's `dynamic()` imports. Before doing so, make sure your SitecoreAI environment [has the component you intend](https://doc.sitecore.com/sai/en/developers/sitecoreai/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:

```shell
sitecore-tools:generate-map
```

To register a component:

1. Import the component and its variants to the component map. Depending on whether you want to use a standard component, or a dynamic component with or without variants, this import works differently:
    - For a standard (non-dynamic) component, write an import statement similar to the following example:

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

    - For a dynamic component, write an import statement similar to the following example:

        ```text
        const MyDynamicComponent = dynamic(() => import('src/components/MyDynamicComponent'));
        ```

        > [!note]
        > If you're using a dynamic component, you can also do the following if needed:
        >
        > -   [Configure a dynamic import to use component-level props](https://doc.sitecore.com/sai/en/developers/content-sdk/20/register-a-component-in-the-component-map.html#UUID-0e8e4f45-7c29-642e-20eb-a84a5a3346af_section-idm234872111586719 "Configure a dynamic import to use component-level props")
        >
        > -   [Configure a dynamic import to use one or more variants](https://doc.sitecore.com/sai/en/developers/content-sdk/20/register-a-component-in-the-component-map.html#UUID-0e8e4f45-7c29-642e-20eb-a84a5a3346af_section-idm234872119394087 "Configure a dynamic import to use one or more variants")

2. When you've finished configuring your component import, add a line to `componentMap` containing the name of the SitecoreAI rendering item followed by the imported component name. The following example maps `MyDynamicComponent` to a rendering with the same name:

    ```ts
    ['MyDynamicComponent', MyDynamicComponent],
    ```

## Configure a dynamic import to use component-level props

If you're importing a dynamic component and you want to use component-level props, add a dynamic module to the import and name the component `Default` as shown in the following example:

```csharp
const MyDynamicComponent = {
  dynamicModule: () => import('src/components/MyDynamicComponent'),
  Default: dynamic(() => import('src/components/MyDynamicComponent')),
};
```

## Configure a dynamic import to use one or more variants

If you're importing a dynamic component and you want to include standard or dynamic variants, add them to the dynamic import and—if you haven't already done so—name the original component the `Default` variant. You can also use variants with non-dynamic components.

In the following example, the `Default` component has a standard variant named `Variant1` and a dynamic variant named `Variant2`:

```csharp
import Variant1 from 'src/components/Variant1';
...
const MyDynamicComponent = {
  ...
  Default: dynamic(() => import('src/components/MyDynamicComponent')),
  Variant1: Variant1,
  Variant2: dynamic(() => import('src/components/MyDynamicComponentVariant2')),
};
```