npmpackage.info

Gathering detailed insights and metrics for @contentful/f36-components

Other packages similar to @contentful/f36-components

@contentful/f36-icons

4.29.1

Forma 36: Icon components

@contentful/f36-forms

4.80.5

Forma 36: Form React Components

@contentful/f36-card

4.80.5

Forma 36: Card components

@contentful/f36-empty-state

4.80.5

Forma 36: Empty State React Components

Gathering detailed insights and metrics for @contentful/f36-components

@contentful/f36-components - 4.80.5 | npmpackage.info

@contentful/f36-components

A design system by Contentful

4.80.5

348

MIT

TypeScript

27.17 kB

5.6

Installations

npm install @contentful/f36-components

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

20.19.1

NPM Version

10.8.2 Pull Requests

Open

11

Total

2,846

Closed

466

Merged

2,369

Issues

Open

13

Total

249

Closed

236

Releases

8,171

@contentful/f36-usage-card@4.1.0

Updated on Jul 11, 2025

@contentful/f36-usage-count@4.1.0

Updated on Jul 10, 2025

@contentful/f36-components@4.80.5

Updated on Jul 03, 2025

@contentful/f36-core@4.80.5

Updated on Jul 03, 2025

@contentful/f36-typography@4.80.5

Updated on Jul 03, 2025

@contentful/f36-tooltip@4.80.5

Updated on Jul 03, 2025

View All 8,171 releases

Languages

TypeScript

JavaScript

MDX

CSS

Handlebars

HTML

TypeScript (84.52%)

JavaScript (11.11%)

MDX (3.67%)

CSS (0.56%)

Handlebars (0.15%)

Developer

contentful

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

348 Stars

3,953 Commits

84 Forks

67 Watchers

58 Branches

323 Contributors

Updated on Jul 12, 2025

Maintainers

View All 323 Contributors

Package Meta Information

Latest Version

4.80.5

Package Id

@contentful/f36-components@4.80.5

Unpacked Size

27.17 kB

Size

5.05 kB

File Count

NPM Version

10.8.2

Node Version

20.19.1

Published on

Jul 03, 2025

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Forma 36 React Components

A React component library for the Forma 36 design system created by Contentful.

Forma 36 React Components

Installing package

1yarn add @contentful/f36-components

1npm install @contentful/f36-components

Usage

Import desired component into your project

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

Development

For local development, in the root of the repo run npm i to install all dependencies and then npm run-script 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 to create a development environment for our component library. To start it locally run:

1npm run-script storybook

When creating new component, before you start, please have a look at our contribution model for Forma 36.

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.

If you use npm run-script generate in the root of the repo, this structure will be created automatically for you

Code Style Guide

Our code style guide

Component principles

We follow a number of principles when creating our components:

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 - they can manage their own margins. To handle margins and layout you can use our core components, like:

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:

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

Testing

We are using Jest and Testing Library to test our components.

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

Run tests

1npm run-script test

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

1npm run-script test --watch

Building

We are using tsup and esbuild together with 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 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

1npm run-script build

Commits

This project uses the Angular JS Commit Message Conventions, via semantic-release. See the semantic-release Default Commit Message Format section for more details.

You can commit the changes by running

1npm run-script commit

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

10

Security-Policy

Determines if the project has published a security policy.

7

SAST

Determines if the project uses static code analysis.

6

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

5

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

1

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 1

Details

Warn: third-party GitHubAction not pinned by hash: .github/workflows/auto-approve.yml:9: update your workflow using https://app.stepsecurity.io/secureworkflow/contentful/forma-36/auto-approve.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/contentful/forma-36/codeql.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/contentful/forma-36/codeql.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/contentful/forma-36/codeql.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy-cdn.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/contentful/forma-36/deploy-cdn.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/deploy-cdn.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/contentful/forma-36/deploy-cdn.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/remove-stale.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/contentful/forma-36/remove-stale.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/sast.yaml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/contentful/forma-36/sast.yaml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/sast.yaml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/contentful/forma-36/sast.yaml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/size-limit.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/contentful/forma-36/size-limit.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/size-limit.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/contentful/forma-36/size-limit.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/stale.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/contentful/forma-36/stale.yml/main?enable=pin
Info: 0 out of 8 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 4 third-party GitHubAction dependencies pinned
Info: 1 out of 1 npmCommand dependencies pinned

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Fuzzing

Determines if the project uses fuzzing.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

5.6

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to @contentful/f36-components

Other packages similar to @contentful/f36-components

@contentful/f36-components

Installations

Developer Guide

Yes

CommonJS

20.19.1

10.8.2

Pull Requests

11

2,846

466

2,369

Issues

13

249

236

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

Forma 36 React Components

Table of contents

Installing package

Usage

Import desired component into your project

Development

Storybook

Example component directory structure

Code Style Guide

Component principles

Adding documentation for component

Testing

Run tests

Building

Create a build of the library

Commits

10

10

10

10

10

7

6

5

1

0

0

0

0

5.6

/10