# @contentful/experiences-components-react

> A basic set of components to use with Studio Experiences

Latest version **4.0.1** (published 2026-10-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install @contentful/experiences-components-react
pnpm add @contentful/experiences-components-react
yarn add @contentful/experiences-components-react
bun add @contentful/experiences-components-react
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 4.0.1 |
| Published | 2026-10-09 |
| First published | 2024-03-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 385.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 18 |
| Maintainers | it-internal, whydah-gally, contentful-ecosystem, michaelpearce |

## Links

- npm: https://www.npmjs.com/package/@contentful/experiences-components-react
- Repository: https://github.com/contentful/experience-builder
- Homepage: https://github.com/contentful/experience-builder/tree/next/packages/components#readme
- Issues: https://github.com/contentful/experience-builder/issues
- npm.io page: https://npm.io/package/@contentful/experiences-components-react

## Dependencies (4)

- [style-inject](https://npm.io/package/style-inject.md) ^0.3.0
- [postcss-import](https://npm.io/package/postcss-import.md) ^16.2.0
- [@contentful/experiences-core](https://npm.io/package/@contentful/experiences-core.md) 4.0.1
- [@contentful/rich-text-react-renderer](https://npm.io/package/@contentful/rich-text-react-renderer.md) ^16.2.2

## Recent versions

- 4.0.1 (latest) — 2026-10-09
- 4.0.2-dev-20261016T2337-3cf6f10.0 (dev) — 2026-10-16
- 4.0.1-beta.0 (next) — 2026-10-09
- 3.8.0-prerelease-20251001T1442-021a279.0 (prerelease) — 2025-10-01
- 3.0.0-alpha-20250805T1527-42cce69.0 (alpha) — 2025-08-05
- 4.0.2-dev-20261016T0059-6677253.0 — 2026-10-16
- 4.0.2-dev-20261015T2349-ebd9173.0 — 2026-10-15
- 4.0.2-dev-20261015T2302-41c433e.0 — 2026-10-15
- 4.0.2-dev-20261015T0428-56e3b42.0 — 2026-10-15
- 4.0.2-dev-20261015T0334-10dd756.0 — 2026-10-15
- 4.0.2-dev-20261015T0250-69620c5.0 — 2026-10-15
- 4.0.2-dev-20261015T0151-d89f384.0 — 2026-10-15
- 4.0.2-dev-20261015T0031-4c28e26.0 — 2026-10-15
- 4.0.2-dev-20261014T2349-2294523.0 — 2026-10-14
- 4.0.2-dev-20261014T0145-46c8f28.0 — 2026-10-14
- … 824 more at https://npm.io/package/@contentful/experiences-components-react/versions

## README

# @contentful/experiences-components-react
### Purpose
- Stores React-specific definitions for Structure and Built-in copmonents provided to the user by Contentful.
- Note that this is a React specific package. Therefore, unlike the core package, React specific compatibilities are implemented here and support for other frontend frameworks would result in a new package being created under a separate namespace.

### Concepts
- **Structure component**: Contentful-provided components for users to define their layout in the experience canvas.
- **Built-in component**: Synonymously named as Basic component. These are Contentful-provided components with a two-fold purpose. First is to get users quickly kickstarted with some compoments such as the built-in button so that they can drag and drop components on the canvas in cases where the user has yet to provide their own custom components. Second purpose is to provide universally useful components on the user's behalf so that every user does not have to solve the same problem. Great examples would be the image or text component.
- **Custom component**: User-defined components where the user will register their components through the `defineComponents` function. Components that are registered through the `defineComponents` function will be displayed in the Components tab in the Experiences UI.
- **Disabling built-ins**: Users are allowed to disable specific or all Contentful-provided `basic/built-in components` as they see fit. The main purpose is to restrict or ensure that Experiences editors use the correct components for their Experiences. Additionally, the built-in components IDs are prefixed with `contentful-` to prevent id clashing where a customer would override Contentful's built-in component in cases where the IDs match. This means the user will have to intentionally id their custom component with the `contentful-` prefix to override the provided built-in component such as `contentful-button`.
- **variables vs builtInStyles**: In the Contentful-provided components or even user-defined custom components there are two ways to enable style options in the Design sidebar in the Experiences UI with default values. Listing an array of options with `builtInStyles` defined like `builtInStyles: ['cfMargin']` will provide the editor with UI margin editing in their Experience with predefined default values for margin which is currently `0px`. However, let's say the user would like to define their button margin with `4px` whenever a button is dropped onto the canvas, they can then define a variable instead like below. This will still provide the editor with the margin UI editing in their experience with the values being defaulted to `4px` instead of `0px`.
```
  variables: {
    cfMargin: {
      displayName: 'Margin',
      type: 'Text',
      group: 'style',
      description: 'The margin of the button.',
      defaultValue: '4px',
    },
  }
```

### Relevant Contentful documentation links
- [Built-in styles](https://www.contentful.com/developers/docs/experiences/built-in-styles/)
- [Register custom components](https://www.contentful.com/developers/docs/experiences/register-custom-components/)
- [Component definition schema](https://www.contentful.com/developers/docs/experiences/component-definition-schema/)

---
_Source: https://npm.io/package/@contentful/experiences-components-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._