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

# Custom components

> Learn about using custom components in Experiences to create on-brand digital experiences.

## Overview

You can import your own design system components into Experiences to create on-brand digital experiences. After the [setup in Contentful](https://www.contentful.com/help/configure-experiences) is completed, you can open the experience entry in the Contentful web app to see the canvas view with your page rendered in an iframe.

## Component requirements

By default, a [component wrapper](/component-wrapper#component-wrapper) is used to attach the necessary props to your components.

If you disable the wrapping container using the `wrapComponent` option in the component registration options, your registered component must handle the following props to fully support Experiences:

* `className` property, to enable Experiences to apply styles to the instance of a registered component.
* The following props which enable canvas interactions to function properly:
  * `data-cf-node-id`
  * `data-cf-node-block-id`
  * `data-cf-node-block-type`

> **Info**
>
> As the product evolves, the list of required props may change. Therefore, it is highly recommended to register components that support **props spreading**, for example, `experienceProps`, as shown in the [example custom component](/custom-components#example-custom-component) below.

## Example custom component

This example demonstrates a custom button component that defines `text` and `variant` properties:

* The `text` property enables content binding for the button's text.
* The `variant` property allows for styling the button.

It also shows how to support props spreading with `experienceProps`. The example imports a Button from Contentful's Forma36 library, but custom components can import from other React component libraries or design systems, too.

```ts
// src/components/Button.tsx

import React from 'react';
import { Button as F36Button } from '@contentful/f36-components';

type Props = {
  text: string;
  variant: 'primary' | 'secondary';
};

export const Button: React.FC<Props> = ({ text, variant, ...experienceProps }) => {
  return (
    <F36Button variant={variant} {...experienceProps}>
      {text}
    </F36Button>
  );
};
```

## Register custom components

To use custom components in Experiences, you need to register them. See the [register custom components](/register-custom-components) guide for more information.