Forma 36 v4 is in beta — and we’re really excited to see how you use it

We have been working hard on the next major version of our Forma 36 design system, and today we are happy to announce the beta release of Forma 36 v4! We’re very excited about it, and hope it will bring a lot of value to everyone using our React components library. So what is Forma 36, what’s new and how can it help you build better?

Forma 36 is Contentful’s open-source design system, built to reduce the overhead of extending the Contentful UI in apps and customization. Forma 36 shows our commitment to extensibility and the builder ethos, giving you the tools you need to build the content platform that perfectly suits your needs. With Forma 36, we provide you with the React components library, so you can create your interface in no time and focus on building the core functionality of your apps.

What’s new in Forma 36 v4?

Our focus for this release was to bring crucial accessibility improvements to our React components. We believe that the web should be for everyone, so v4 brings WCAG level AAA compliance in all of our React components.

A clear example of this is in the Menu component, which replaces the Dropdown component in v3. You can now use arrow keys to navigate through menu items. Use ArrowUp and ArrowDown to navigate within items, useArrowLeft and ArrowRight to navigate within submenus, and use Esc key to close the Menu. What’s more, we automatically focus on the first item in the menu when the component is open. We’ve also made sure to include all ARIA roles on the components.

The next major change is the approach to how we have built the library. In v4, we have split components into separate packages. This means that now you can use just the components you need, without adding the full suite of components to your bundle. This change will make your bundle size much smaller and improve the performance of your apps — particularly for apps that only use a few components from the library. You can see below that when we compare versions of an app that only imports one component below, v4 makes the bundle around 85% smaller than v3! That will make Contentful even smoother for your content teams.

Screenshot of forma36 v3 vs v4

How to migrate your project to use Forma 36 v4

We worked hard on the developer experience of Forma 36, and so we provide you with all the tools you need to migrate your project as quickly as possible.

To make it easier for developers to use Forma 36 in their apps, the API for v4 is now consistent with our code style, making it easier for anyone who already works with our APIs to utilize our components.

Codemods are available for most of the components, and you can migrate your components with just one command. For those few components that cannot be migrated automatically, we’ve provided you with detailed migration guides. Have a look at the detailed documentation in GitHub.

To update your Forma 36 components, run:

npx @contentful/f36-codemod

This will kick off the codemod prompt in your terminal. Follow the instructions to choose which component(s) you would like to migrate, and watch the updates happen! Check out the video below to see how easy it is to automatically migrate all of your Button components with a single command — including changing the names of the affected properties. No work from your side is required at all!

Gif of Migrating in Forma36 V4

We need your feedback!

Forma 36 v4 is now available in beta for you to try out. There might still be some changes that we will introduce to the API — including small improvements and fixes — but we need your help to make sure that everything works as well as we want it to!

We’d love for you to try out Forma 36 v4 and share your feedback with us! To share your feedback, you can create a GitHub issue using one of the issue templates, submit your feedback using this anonymous form or join the community Slack channel to share directly with the team. Happy building and we look forward to seeing what you create!

About the author

Don't miss the latest

Get updates in your inbox
Discover new insights from the Contentful developer community each month.
add-circle arrow-right remove style-two-pin-marker subtract-circle