> 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.

# Component wrapper

> Learn how to use the component wrapper in Experiences, including how to disable it, change the wrapping container tag, and adjust the wrapping container width.

## Component wrapper

Components registered with the Experiences SDK are encapsulated within a `<div>` element that acts as a wrapping container.

Styles generated by Experiences are applied to this wrapping container rather than the component itself, preventing additional styles from interfering with your component's styling.

If you prefer styles from the Experiences UI to be applied directly to your component, you can disable the wrapping container.

### Disable the wrapping container

You can disable the wrapping container by setting the `wrapComponent` option to `false` during component registration.

If you choose to disable the container, ensure your component handles the required props for Experiences as described in [component requirements](/custom-components#component-requirements).

```ts
import { defineComponents } from '@contentful/experiences-sdk-react';
import { Example, exampleDefinition } from './components/Example';

defineComponents([
  {
    component: Example,
    definition: exampleDefinition,
    options: {
      wrapComponent: false
    }
  }
]);
```

### Change the wrapping container tag

The wrapping container tag can be changed by setting the `wrapContainer` option in the component registration.

```ts
import { defineComponents } from '@contentful/experiences-sdk-react';
import { Example, exampleDefinition } from './components/Example';

defineComponents([
  {
    component: Example,
    definition: exampleDefinition,
    options: {
      wrapContainer: 'span'
    }
  }
]);
```