> This page is for Studio.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://contentful-staging.ferndocs.com/developers/docs/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://contentful-staging.ferndocs.com/developers/docs/_mcp/server.

# Built-in components

> Learn how to manage built-in components in Experiences, including enabling and disabling basic components like Heading, Text, Rich Text, Image, Button, and Divider.

## Basic components

Contentful offers built-in basic components, including Heading, Text, Rich Text, Image, Button, and Divider, which are enabled by default. If needed, you can disable these components using the `defineComponents` function when [registering custom components](/register-custom-components).

### Enable all basic components

All built-in basic components are enabled by default when you call the `defineComponents` function and do **not** provide the `enabledBuiltInComponents` option in the optional second parameter.

```ts
import { defineComponents } from '@contentful/experiences-sdk-react';

defineComponents(
  [
    // Register components here...
    // {
    //   component: Example,
    //   definition: exampleDefinition,
    // }
  ]
);
```

### Enable specific basic components

To enable only specific built-in components, pass an array of their IDs to `enabledBuiltInComponents`.

In the example below, all built-in components except the Image component are enabled:

```ts
import { defineComponents, CONTENTFUL_COMPONENTS } from '@contentful/experiences-sdk-react';

defineComponents(
  [
    // Register components here...
    // {
    //   component: Example,
    //   definition: exampleDefinition,
    // }
  ],
  {
    enabledBuiltInComponents: [
      CONTENTFUL_COMPONENTS.button.id,
      CONTENTFUL_COMPONENTS.divider.id,
      CONTENTFUL_COMPONENTS.heading.id,
      CONTENTFUL_COMPONENTS.richText.id,
      CONTENTFUL_COMPONENTS.text.id,
    ],
  }
);
```

> **Info**
>
> The Image component is disabled in this example because its ID (`CONTENTFUL_COMPONENTS.image.id`) is not included in the `enabledBuiltInComponents` array.

### Disable all basic components

To disable all built-in basic components, pass an object with `enabledBuiltInComponents` set to an empty array as the second parameter to `defineComponents`.

```ts
import { defineComponents } from '@contentful/experiences-sdk-react';

defineComponents(
  [
    // Register components here...
    // {
    //   component: Example,
    //   definition: exampleDefinition,
    // }
  ],
  {
    enabledBuiltInComponents: [],
  }
);
```