Getting started

Installation

Install components

Inside your React project directory, install Forma 36 by running the following commands:

When using NPM:

npm i @contentful/f36-components

When using Yarn:

yarn add @contentful/f36-components

When you install @contentful/f36-components package, tree shaking will make your bundle contain only components that you actually import and need.

Installing components as separate packages

Although we recommend using @contentful/f36-components, you can install Forma 36 React components as separate packages if that's what you need for your project. For example, here's how to install just the button:

When using NPM:

npm i @contentful/f36-button

When using Yarn:

yarn add @contentful/f36-button

Install icons

Forma 36 icons are a separate package to reduce the size of the main bundle. If you need to use icons in your project, install them separately by running either of the following:

When using NPM:

npm i @contentful/f36-icons

When using Yarn:

yarn add @contentful/f36-icons

Additional learning

Forma 36 components are build using TypeScript and React 📚

Using Forma 36

As soon as you have @contentful/f36-components added to your project, you can go ahead and start using them in your app. For example, here's how to use a button:

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

const YourComponent = () => (
  <>
    <Button variant="primary">Your button</Button>
  </>
);

Using GlobalStyles

Control default browser styles with the GlobalStyles component. The GlobalStyles component uses the Global component from Emotion under the hood. Import GlobalStyles somewhere at the beginning of your project like in the example below:

import ReactDOM from 'react-dom';
import { GlobalStyles } from '@contentful/f36-components';

import App from './App';

const rootElement = document.getElementById('root');
ReactDOM.render(
  <>
    <GlobalStyles />
    <App />
  </>,
  rootElement,
);

Building Contentful apps using Forma 36

Apps are packages that simplify customization and integration by modifying your space in Contentful. An app can help adapt Contentful to individual business processes and integrate with other services.

From small field editor improvements to deeply integrated full-page applications, Forma 36 is here to help you efficiently build apps with the Contentful App Framework.