Component library

Introduction

The Forma 36 Design System and React component library 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 and Forma 36 is to use 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 to learn more.

Add to an existing UI Extension that uses Webpack or Parcel

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

1
import { init } from '@contentful/app-sdk';
2
import React from 'react';
3
import ReactDOM from 'react-dom';
4
import { Button } from '@contentful/forma-36-react-components';
5
import '@contentful/forma-36-react-components/dist/styles.css';
6
7
class App extends React.Component {
8
  render() {
9
    return (
10
      <Button
11
        buttonType="primary"
12
        onClick={() => {
13
          console.log('You clicked on Forma36 button');
14
        }}
15
      >
16
        Click on me
17
      </Button>
18
    );
19
  }
20
}
21
22
init(() => {
23
  ReactDOM.render(<App />, document.getElementById('root'));
24
});

Example built with Forma36 and create-contentful-extension

• Publish button with confirmation

Links

• Forma36 website
• Forma36 Storybook

Next steps

• Managing extensions from the web app