@codegouvfr/react-dsfr

🇫🇷 French State Design System React toolkit 🇫🇷

Components documentation - Guides - Playground

👉 Version française du README ici.

WARNING: This Design System is only meant to be used for official French's public service websites.
Its main purpose is to make it easy to identify governmental websites for citizens. See terms.

This module is an advanced toolkit that leverages @gouvfr/dsfr, the vanilla JS/CSS implementation of the DSFR.

While this module is written in TypeScript, using TypeScript in your application is optional (but recommended as it comes with outstanding benefits to both you and your codebase).

• Fully TypeSafe, well documented API.
• Always in up to date with latest the DSFR evolutions. Code and Types generated from @gouvfr/dsfr/dist/dsfr.css.
• Exactly the same look and feel than with @gouvfr/dsfr.
• No white flash when reloading in SSR setup.
• Most components are server component ready. The others are labeled with "use client";
• Perfect integration with all major React framework: Next.js (PagesDir and AppDir), Create React App, Vue.
• (Almost) All the components are implemented
• Three shakable distribution, cherry pick the components you import. (It's not all in a big .js bundle)
• Optional integration with MUI. If you use MUI components they will be automatically adapted to look like DSFR components. See documentation.
• Enable CSS in JS by providing a useColors() hooks that exposes the correct colors options and decision for the currently enabled color scheme.
• Opt-in i18n, built in text can be displayed in multiple languages and user can provide extra translations.
• Support routing libraries like react-router.

This module is a product of Etalab's Free and open source software pole. I'm working full time on this project. You can expect rapid development.

🚀 Get started 🚀

Governance

This project is co-maintained by public servants from various French administrations.

• Joseph Garrone
• Julien Bouquillon - DNUM des ministères sociaux
• Dylan DECRULLE - Insee

Migrating from @dataesr/react-dsfr?

If your project is using @dataesr/react-dsfr and you're not willing to migrate to @codegouvfr/react-dsfr you can still benefit from some of this project features:

• The fr-* classes autocompletion and type safety.
• Use the type safe color system.
• Use the MUI theme.
• The the spacing system and breakpoints util for building responsive UI.

Here is a playground to demonstrate it.

Development

git clone https://github.com/codegouvfr/react-dsfr
cd react-dsfr
yarn

# Starting storybook
yarn storybook

# Starting test apps
yarn start-cra  # For testing in in a Create React App setup
yarn start-vite # For testing in a Vite setup
yarn start-next-pagesdir # For testing in a Next.js 13 PagesDir setup (the default setup)
yarn start-next-appdir # For testing in a Next.js 13 AppDir setup

# Run all unit test (test/runtime):
yarn test
# Run only test/runtime/cssVariable.test.ts (for example)
npx vitest -t "Resolution of CSS variables"

# Debugging while unit testing

Want to contribute?

Thank you! See the contribution guide.

How to publish a new version on NPM, how to release a beta version

This repo was bootstrapped form garronej/ts-ci have a look at the documentation of this starter for understanding the lifecycle of this repo.

Use-cases

A few projects that use @codegouvfr/react-dsfr.

• https://sill.code.gouv.fr
• https://immersion-facile.beta.gouv.fr/
• https://refugies.info/fr
• https://www.mediateur-public.fr/
• https://signal.conso.gouv.fr/
• https://github.com/BaseAdresseNationale/adresse.data.gouv.fr
• https://github.com/DISIC/observatoire.numerique.gouv.fr
• https://github.com/DISIC/monfranceconnect
• https://github.com/InseeFr/Lunatic-DSFR
• https://github.com/EIG6-Geocommuns/lidarviz-front
• https://github.com/EIG6-Geocommuns/geocommuns-core
• https://github.com/SocialGouv/bpco-site
• https://github.com/EIG6-ArtificIA/predictia_front
• https://github.com/BaseAdresseNationale/bal-admin
• https://github.com/etalab/sill-web
• https://github.com/inclusion-numerique/mediature
• https://territoiresentransitions.fr (maybe)

Keep in mind that the project has been released recently so it's only natural that there is only a few projects in production using it.