@codegouvfr/react-dsfr

🇫🇷 French State Design System React integration 🇫🇷

Documentation website

🗣️ Le 9 décembre (ce vendredi) de 11h à 12h30, venez assister à la présentation de @codegouvfr/react-dsfr et poser vos questions! 👉Lien du salon ateliers BlueHats👈

This module is a wrapper/compatibility layer for @gouvfr/dsfr, the vanilla JS/CSS implementation of the DSFR.

For TypeScript and JavaScript projects.

• 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.
• Perfect integration with all major React framework: Next.js, Create React App, Vue.
• All the components are implemented (2/42)
• 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 useTheme() 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.

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 - Playground

Development

Here are instructions for contributing, if you are looking to use @codegouvfr/react-dsfr heads over to the documentation page.

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

# Starting storybook
yarn storybook
# You can run 'npx tsc -w -p src' on another terminal for enabling hot reloading.

# Starting test apps
yarn start-cra  # For testing in in a Create React App setup
yarn start-next # For testing in a Next.js setup
yarn start-vite # For testing in a Vite 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

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.