![](\"https://github.com/codegouvfr/react-dsfr/releases/download/assets/dsfr-react_repo-card.png\")
\n\n \n
\n 🇫🇷 French State Design System React toolkit 🇫🇷 \n
\n
\n \n ![](\"https://github.com/codegouvfr/react-dsfr/actions/workflows/ci.yaml/badge.svg\"){kind=icon}
\n \n \n ![](\"https://img.shields.io/npm/v/@codegouvfr/react-dsfr?logo=npm\")
![](\"https://img.shields.io/bundlephobia/minzip/@codegouvfr/react-dsfr\")
![](\"https://img.shields.io/npm/l/@codegouvfr/react-dsfr\")
\n Components documentation\n -\n Guides\n -\n Playground\n
\n\n👉 Version française du README [ici](https://github.com/codegouvfr/react-dsfr/blob/main/README.fr.md).\n\n> WARNING: This Design System is only meant to be used for official French's public service websites. \n> Its main purpose is to make it easy to identify governmental websites for citizens. [See terms](https://www.systeme-de-design.gouv.fr/utilisation-et-organisation/perimetre-d-application).\n\nThis module is an advanced toolkit that leverages [@gouvfr/dsfr](https://github.com/GouvernementFR/dsfr), the vanilla JS/CSS implementation of the DSFR.\n\n\n![\"image\"](\"https://user-images.githubusercontent.com/6702424/224423044-c1823249-eab6-4844-af43-d059c01416af.png\")
\n\n\n> 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).\n\n- [x] Fully TypeSafe, well documented API.\n- [x] Always in up to date with latest the DSFR evolutions.\n Code and Types generated from [`@gouvfr/dsfr`](https://www.npmjs.com/package/@gouvfr/dsfr)`/dist/dsfr.css`.\n- [x] Exactly the same look and feel than with [@gouvfr/dsfr](https://www.npmjs.com/package/@gouvfr/dsfr).\n- [x] No [white flash when reloading in SSR setup](https://github.com/codegouvfr/@codegouvfr/react-dsfr/issues/2#issuecomment-1257263480).\n- [x] Most components are server component ready. The others are labeled with `\"use client\";`\n- [x] [Perfect integration with all major React framework: Next.js (PagesDir and AppDir), Create React App, Vite](https://react-dsfr.codegouv.studio/).\n- [x] (Almost) All [the components](https://www.systeme-de-design.gouv.fr/elements-d-interface) are [implemented](https://components.react-dsfr.codegouv.studio/)\n- [x] Three shakable distribution, cherry pick the components you import. (It's not all in a big .js bundle)\n- [x] Optional integration with [MUI](https://mui.com/). If you use MUI components they will\n be automatically adapted to look like [DSFR components](https://www.systeme-de-design.gouv.fr/elements-d-interface). See [documentation](https://react-dsfr.codegouv.studio/mui-integration).\n- [x] Enable the usage of CSS in JS solutions. [Doc](https://react-dsfr.codegouv.studio/css-in-js).\n- [x] Opt-in i18n, built in text can be displayed in multiple languages and user can provide extra translations.\n- [x] [Support routing libraries](https://react-dsfr.codegouv.studio/routing) like react-router.\n\n> 💡 Need ready to use, DSFR compliant login and register pages? Checkout [keycloak-theme-dsfr](https://github.com/codegouvfr/keycloak-theme-dsfr).\n\n\n 🚀 Get started 🚀 \n
\n\n# Governance\n\nThis module is a product of [Etalab's Free and open source software pole](https://code.gouv.fr/en/mission/).\n\nThis project is co-maintained by public servants from various French administrations:\n\n- [Joseph Garrone](https://github.com/garronej) - Insee\n- [Julien Bouquillon](https://github.com/revolunet) - DNUM des ministères sociaux\n- [Dylan DECRULLE](https://github.com/ddecrulle) - Insee\n- [Enguerran Weiss](https://github.com/enguerranws) - Plateforme de l'Inclusion\n\n## Development - for contributing to the project\n\n```bash\ngit clone https://github.com/codegouvfr/react-dsfr\ncd react-dsfr\nyarn\n\n# Starting storybook\nyarn storybook\n\n# Starting test apps\nyarn start-cra # For testing in a Create React App setup\nyarn start-vite # For testing in a Vite setup\nyarn start-next-pagesdir # For testing in a Next.js 13 PagesDir setup (the default setup)\nyarn start-next-appdir # For testing in a Next.js 13 AppDir setup\n\n# Run all unit test (test/runtime):\nyarn test\n# Run only test/runtime/cssVariable.test.ts (for example)\nnpx vitest -t \"Resolution of CSS variables\"\n```\n\n### Want to contribute?\n\nThank you! See [the contribution guide](https://github.com/codegouvfr/react-dsfr/blob/main/CONTRIBUTING.md).\n\n### How to publish a new version on NPM, how to release a beta version\n\nThis repo was bootstrapped form [garronej/ts-ci](https://github.com/garronej/ts-ci) have a look at the\ndocumentation of this starter for understanding the lifecycle of this repo.\n\n## Use-cases\n\nA few projects that use `@codegouvfr/react-dsfr`.\n\n- https://adresse.data.gouv.fr\n- https://cartes.gouv.fr\n- https://code.gouv.fr/sill\n- https://diagoriente.beta.gouv.fr\n- https://egapro.travail.gouv.fr\n- https://github.com/BaseAdresseNationale/bal-admin\n- https://github.com/DISIC/monfranceconnect\n- https://github.com/EIG6-ArtificIA/predictia_front\n- https://github.com/EIG6-Geocommuns/geocommuns-core\n- https://github.com/EIG6-Geocommuns/lidarviz-front\n- https://github.com/inclusion-numerique/mediature\n- https://github.com/InseeFr/Lunatic-DSFR\n- https://github.com/SocialGouv/bpco-site\n- https://immersion-facile.beta.gouv.fr\n- https://maisondelautisme.gouv.fr/\n- https://observatoire.numerique.gouv.fr\n- https://potentiel.beta.gouv.fr\n- https://refugies.info\n- https://signal.conso.gouv.fr\n- https://territoiresentransitions.fr\n- https://www.mediateur-public.fr\n- https://suiteterritoriale.anct.gouv.fr\n","readmeFilename":"README.md"}