react-dsfr

React DSFR is a specialised UI toolkit designed for crafting websites for the French public service, using the popular React framework.

In France, the “Service d’Information du Gouvernement” (SIG) has outlined a mandatory Design System to standardise the appearance and functionality across all public service websites. This design system is referred to as “The French State Design System,” abbreviated as the DSFR. The objectives behind enforcing the DSFR are twofold. Firstly, the standardised design enables French citizens to instantly identify government websites. Secondly, the DSFR enhances ease of use and accessibility by employing a set of consistent design principles and structures across various platforms. Special attention has also been given to making this system exceptionally accessible.

On the other hand, React is the predominant frontend framework used for constructing the majority of modern web experiences. It has emerged as the de facto standard for building contemporary websites.

Although the SIG offers an implementation of this design system in the form of CSS and JavaScript files, these are not directly usable in a React project. Moreover, developers have come to expect a high level of developer experience from the tools they use for website construction. Libraries like MUI and Tailwind UI have revolutionised the speed and maintainability of web development.

React DSFR aims to provide an equivalent level of developer experience, akin to what MUI and Tailwind UI offer, but tailored for public service websites. This ensures that adhering to the DSFR requirements is not a hindrance but a facilitator, allowing teams to concentrate on what genuinely matters—creating excellent digital services for citizens.

It has rapidly become the go-to toolkit for hundreds of public servants who work as developers, aiding them in shaping the future of digital public service.

 Watch a video introducing the library here.