# @contentful/f36-components

> Contentful UI Component Library

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

## Install

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

## Health

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

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

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 6.22.0 |
| Published | 2026-09-10 |
| First published | 2021-03-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 40 |
| Unpacked size | 30.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 361 |
| Maintainers | it-internal, whydah-gally, contentful-ecosystem, michaelpearce |

## Links

- npm: https://www.npmjs.com/package/@contentful/f36-components
- Repository: https://github.com/contentful/forma-36
- Homepage: https://github.com/contentful/forma-36#readme
- Issues: https://github.com/contentful/forma-36/issues
- npm.io page: https://npm.io/package/@contentful/f36-components

## Dependencies (40)

- [@contentful/f36-card](https://npm.io/package/@contentful/f36-card.md) ^6.22.0
- [@contentful/f36-core](https://npm.io/package/@contentful/f36-core.md) ^6.22.0
- [@contentful/f36-icon](https://npm.io/package/@contentful/f36-icon.md) ^6.22.0
- [@contentful/f36-list](https://npm.io/package/@contentful/f36-list.md) ^6.22.0
- [@contentful/f36-menu](https://npm.io/package/@contentful/f36-menu.md) ^6.22.0
- [@contentful/f36-note](https://npm.io/package/@contentful/f36-note.md) ^6.22.0
- [@contentful/f36-pill](https://npm.io/package/@contentful/f36-pill.md) ^6.22.0
- [@contentful/f36-tabs](https://npm.io/package/@contentful/f36-tabs.md) ^6.22.0
- [@contentful/f36-asset](https://npm.io/package/@contentful/f36-asset.md) ^6.22.0
- [@contentful/f36-badge](https://npm.io/package/@contentful/f36-badge.md) ^6.22.0
- [@contentful/f36-forms](https://npm.io/package/@contentful/f36-forms.md) ^6.22.0
- [@contentful/f36-image](https://npm.io/package/@contentful/f36-image.md) ^6.22.0
- [@contentful/f36-modal](https://npm.io/package/@contentful/f36-modal.md) ^6.22.0
- [@contentful/f36-table](https://npm.io/package/@contentful/f36-table.md) ^6.22.0
- [@contentful/f36-avatar](https://npm.io/package/@contentful/f36-avatar.md) ^6.22.0
- [@contentful/f36-button](https://npm.io/package/@contentful/f36-button.md) ^6.22.0
- [@contentful/f36-header](https://npm.io/package/@contentful/f36-header.md) ^6.22.0
- [@contentful/f36-layout](https://npm.io/package/@contentful/f36-layout.md) ^6.22.0
- [@contentful/f36-navlist](https://npm.io/package/@contentful/f36-navlist.md) ^6.22.0
- [@contentful/f36-popover](https://npm.io/package/@contentful/f36-popover.md) ^6.22.0
- [@contentful/f36-spinner](https://npm.io/package/@contentful/f36-spinner.md) ^6.22.0
- [@contentful/f36-tooltip](https://npm.io/package/@contentful/f36-tooltip.md) ^6.22.0
- [@contentful/f36-collapse](https://npm.io/package/@contentful/f36-collapse.md) ^6.22.0
- [@contentful/f36-datetime](https://npm.io/package/@contentful/f36-datetime.md) ^6.22.0
- [@contentful/f36-skeleton](https://npm.io/package/@contentful/f36-skeleton.md) ^6.22.0
- [@contentful/f36-accordion](https://npm.io/package/@contentful/f36-accordion.md) ^6.22.0
- [@contentful/f36-text-link](https://npm.io/package/@contentful/f36-text-link.md) ^6.22.0
- [@contentful/f36-copybutton](https://npm.io/package/@contentful/f36-copybutton.md) ^6.22.0
- [@contentful/f36-datepicker](https://npm.io/package/@contentful/f36-datepicker.md) ^6.22.0
- [@contentful/f36-pagination](https://npm.io/package/@contentful/f36-pagination.md) ^6.22.0
- [@contentful/f36-typography](https://npm.io/package/@contentful/f36-typography.md) ^6.22.0
- [@contentful/f36-usage-card](https://npm.io/package/@contentful/f36-usage-card.md) ^6.22.0
- [@contentful/f36-drag-handle](https://npm.io/package/@contentful/f36-drag-handle.md) ^6.22.0
- [@contentful/f36-empty-state](https://npm.io/package/@contentful/f36-empty-state.md) ^6.22.0
- [@contentful/f36-entity-list](https://npm.io/package/@contentful/f36-entity-list.md) ^6.22.0
- [@contentful/f36-multiselect](https://npm.io/package/@contentful/f36-multiselect.md) ^6.22.0
- [@contentful/f36-usage-count](https://npm.io/package/@contentful/f36-usage-count.md) ^6.22.0
- [@contentful/f36-autocomplete](https://npm.io/package/@contentful/f36-autocomplete.md) ^6.22.0
- [@contentful/f36-notification](https://npm.io/package/@contentful/f36-notification.md) ^6.22.0
- [@contentful/f36-progress-stepper](https://npm.io/package/@contentful/f36-progress-stepper.md) ^6.22.0

## Recent versions

- 6.22.0 (latest) — 2026-09-10
- 6.0.0-alpha.20 (alpha) — 2026-01-29
- 4.11.0-beta.0 (beta) — 2022-07-11
- 4.0.1-beta.2483 (canary) — 2021-11-03
- 4.0.1-next-v4-10931.2481 (next-v4) — 2021-11-03
- 6.21.0 — 2026-09-10
- 6.20.2 — 2026-09-09
- 6.20.1 — 2026-08-26
- 6.20.0 — 2026-08-20
- 6.19.1 — 2026-08-20
- 6.19.0 — 2026-08-12
- 6.18.0 — 2026-08-09
- 6.17.0 — 2026-08-05
- 6.16.2 — 2026-07-24
- 6.16.1 — 2026-07-22
- … 540 more at https://npm.io/package/@contentful/f36-components/versions

## README

# Forma 36 React Components

A React component library for the [Forma 36](https://f36.contentful.com/) design system created by [Contentful](https://www.contentful.com).

## Table of contents

<!-- TOC -->

- [Forma 36 React Components](#f36-components)
  - [Table of contents](#table-of-contents)
  - [Installing package](#installing-package)
  - [Usage](#usage)
    - [Import desired component into your project](#import-desired-component-into-your-project)
  - [Development](#development)
    - [Storybook](#storybook)
    - [Example component directory structure](#example-component-directory-structure)
    - [Code Style Guide](#code-style-guide)
    - [Component principles](#component-principles)
    - [Adding documentation for component](#adding-documentation-for-component)
  - [Testing](#testing)
    - [Run tests](#run-tests)
  - [Building](#building)
    - [Create a build of the library](#create-a-build-of-the-library)
  - [Commits](#commits)
  <!-- /TOC -->

## Installing package

```bash
yarn add @contentful/f36-components
```

Or

```bash
npm install @contentful/f36-components
```

## Usage

### Import desired component into your project

```js
import { Button } from '@contentful/f36-components';
```

## Development

For local development, in the root of the repo run `pnpm install` to install all dependencies and then `pnpm build` to build all packages.
This package depends on several other Forma 36 packages so you will need to build all of them.

### Storybook

We use [Storybook](https://storybook.js.org/) to create a development environment for our component library. To start it locally run:

```bash
pnpm storybook
```

When creating new component, before you start, please have a look at our [contribution model for Forma 36](https://f36.contentful.com/introduction/contributing).

### Example component directory structure

A component's directory should resemble the following:

```
/my-component
  /examples
  /src
    index.ts // A file for exporting your component
    MyComponent.tsx  // Your React component
    MyComponent.test.tsx // Component tests
    MyComponent.styles.ts // Component styles
  /stories
    # stories for storybook of each component inside the package
  README.mdx
  package.json
```

For more detailes you can have a look in document that describes [folder structure in details](https://github.com/contentful/forma-36/blob/main/docs/folder-structure.md).

> If you use `pnpm generate` in the root of the repo, this structure will be created automatically for you

### Code Style Guide

[Our code style guide](https://github.com/contentful/forma-36/blob/main/docs/code-style-guide.md)

### Component principles

We follow a number of principles when creating our components:

1.  **A component is responsible for only its internal spacing**

Component should only be responsible for its own internal spacing - never external spacing. This means that we're flexible in where our components can be used without having to override margins.
The only outlier from this rule are [typography components](https://f36.contentful.com/components/display-text) - they can manage their own margins. To handle margins and layout you can use our core components, like:

- [Box](https://f36.contentful.com/components/box)
- [Flex](https://f36.contentful.com/components/flex)
- [Grid](https://f36.contentful.com/components/grid)
- [Stack](https://f36.contentful.com/components/stack)

### Adding documentation for component

We would like to make sure that every component contains a README file with recommendations and guidelines.
Make sure that your documentation for the component contains following parts:

1. A short summary of the component.
2. Import - provide example how to import component.
3. Examples - try to add couple of examples, both basic and more advanced, where component is used in the context with other components.
4. Props (API reference) - Overview of properties
5. Content guideliness - try to describe in best practices around content for your component
6. Accessibility - If possible, we strongly recommend providing accessibility guidelines.

## Testing

We are using [Vitest](https://vitest.dev/) and [Testing Library](https://testing-library.com/docs/react-testing-library/intro/) to test our components.

Tests are kept next to their components and use the `.test.js` file extension.

### Run tests

```bash
pnpm test
```

It is recommended to run tests in development with the optional `--watch` flag.

```bash
pnpm test:watch
```

## Building

We are using [tsdown](https://tsdown.dev/) and [esbuild](https://esbuild.github.io/) together with [Microbundle](https://www.npmjs.com/package/microbundle) to build our component library.

Each component builds to its own `dist` directory with:

- `index.d.ts` – TypeScript type declaration file
- `index.js` – CJS (CommonJS)
- `index.modern.mjs` – [Modern](https://github.com/developit/microbundle#-modern-mode-) output (work in all modern browsers)
- `index.module.js` – legacy ESM (ES Modules) output (for bundlers)
- `index.umd.js` – legacy UMD (Universal Module Definition) output (for Node & CDN use)

### Create a build of the library

```bash
pnpm build
```

## Commits

This project uses the [Angular JS Commit Message Conventions](https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/edit), via semantic-release. See the semantic-release [Default Commit Message Format](https://github.com/semantic-release/semantic-release#default-commit-message-format) section for more details.

You can commit the changes by running

```bash
pnpm commit
```

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