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.

Help improve this page