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

# Component library

> How Forma 36 can be used to create UI Extensions that feel like they are built by Contentful | Getting started | Examples, links and next steps

> **Info**
>
> **Use the [App Framework](/extensibility/app-framework) for any new projects.** We recommend creating apps instead of UI extensions. [Read the app FAQ to learn why](https://www.contentful.com/help/contentful-app-framework-faq/).

## Introduction

The [Forma 36 Design System and React component library](https://f36.contentful.com) provides a comprehensive collection of UI components which can be used to quickly build UI Extensions and Contentful related applications.

## Requirements

* Forma 36 requires React >= 16.6.3

## Getting Started

### Starting from scratch

The easiest way to create a new extension with [React](/sdks/javascript/tutorials/react-tutorial) and Forma 36 is to use [create-contentful-extension](https://github.com/contentful/create-contentful-extension) CLI, similar to the well-known `create-react-app`. It generates an example extension for you and hides all configuration details, so you don't need to install or configure tools like Webpack, Babel or Parcel. These tools are preconfigured and hidden so that you can focus on your own code.

Read [Manage UI Extensions via the CLI](/extensibility/ui-extensions/managing-a-ui-extension) to learn more.

### Add to an existing UI Extension that uses Webpack or Parcel

```bash
  npm i react react-dom @contentful/app-sdk @contentful/forma-36-react-components
```

```js
import { init } from '@contentful/app-sdk';
import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from '@contentful/forma-36-react-components';
import '@contentful/forma-36-react-components/dist/styles.css';

class App extends React.Component {
  render() {
    return (
      <Button
        buttonType="primary"
        onClick={() => {
          console.log('You clicked on Forma36 button');
        }}
      >
        Click on me
      </Button>
    );
  }
}

init(() => {
  ReactDOM.render(<App />, document.getElementById('root'));
});
```

## Example built with Forma36 and create-contentful-extension

* [Publish button with confirmation](https://github.com/contentful/extensions/tree/master/samples/publish-confirm)

## Links

* [Forma36 website](https://f36.contentful.com)
* [Forma36 Storybook](https://f36-storybook.contentful.com)

## Next steps

* [Managing extensions from the web app](/extensibility/ui-extensions/managing-a-ui-extension-with-webapp/)