Gathering detailed insights and metrics for @contentful/f36-components
Gathering detailed insights and metrics for @contentful/f36-components
Gathering detailed insights and metrics for @contentful/f36-components
Gathering detailed insights and metrics for @contentful/f36-components
npm install @contentful/f36-components
Typescript
Module System
Node Version
NPM Version
74.3
Supply Chain
23.9
Quality
93.2
Maintenance
100
Vulnerability
99.6
License
@contentful/f36-multiselect@4.26.2
Updated on Jul 02, 2025
@contentful/f36-components@4.80.3
Updated on May 19, 2025
@contentful/f36-core@4.80.3
Updated on May 19, 2025
@contentful/f36-typography@4.80.3
Updated on May 19, 2025
@contentful/f36-tooltip@4.80.3
Updated on May 19, 2025
@contentful/f36-text-link@4.80.3
Updated on May 19, 2025
TypeScript (84.36%)
JavaScript (11.23%)
MDX (3.69%)
CSS (0.56%)
Handlebars (0.15%)
Total Downloads
5,747,253
Last Day
414
Last Week
30,946
Last Month
136,480
Last Year
1,592,745
MIT License
348 Stars
3,905 Commits
84 Forks
67 Watchers
58 Branches
323 Contributors
Updated on Jul 03, 2025
Minified
Minified + Gzipped
Latest Version
4.80.4
Package Id
@contentful/f36-components@4.80.4
Unpacked Size
27.17 kB
Size
5.05 kB
File Count
11
NPM Version
10.8.2
Node Version
20.19.1
Published on
May 30, 2025
Cumulative downloads
Total Downloads
38
4
4
A React component library for the Forma 36 design system created by Contentful.
1yarn add @contentful/f36-components
Or
1npm install @contentful/f36-components
1import { Button } from '@contentful/f36-components';
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.
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.
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
We follow a number of principles when creating our components:
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:
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:
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.
1npm run-script test
It is recommended to run tests in development with the optional --watch
flag.
1npm run-script test --watch
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 fileindex.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)1npm run-script build
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.
Reason
30 commit(s) and 1 issue activity found in the last 90 days -- score normalized to 10
Reason
no dangerous workflow patterns detected
Reason
license file detected
Details
Reason
no binaries found in the repo
Reason
security policy file detected
Details
Reason
Found 10/13 approved changesets -- score normalized to 7
Reason
branch protection is not maximal on development and all release branches
Details
Reason
dependency not pinned by hash detected -- score normalized to 1
Details
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
34 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-06-30
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 MoreLast Day
-54.3%
414
Compared to previous day
Last Week
-3.1%
30,946
Compared to previous week
Last Month
0.1%
136,480
Compared to previous month
Last Year
16.8%
1,592,745
Compared to previous year