{"id":14483602,"url":"https://github.com/codegouvfr/react-dsfr","last_synced_at":"2026-03-03T22:01:12.066Z","repository":{"id":60055380,"uuid":"538890789","full_name":"codegouvfr/react-dsfr","owner":"codegouvfr","description":"🇫🇷 The French Government Design system React toolkit","archived":false,"fork":false,"pushed_at":"2026-01-29T07:18:14.000Z","size":128592,"stargazers_count":478,"open_issues_count":33,"forks_count":85,"subscribers_count":7,"default_branch":"main","last_synced_at":"2026-01-29T09:37:32.870Z","etag":null,"topics":["bluehats","design-system","dsfr","react","storybook","typescript"],"latest_commit_sha":null,"homepage":"https://react-dsfr.codegouv.studio","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codegouvfr.png","metadata":{"files":{"readme":"README.fr.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":"publiccode.yml","codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-09-20T08:45:11.000Z","updated_at":"2026-01-29T07:13:00.000Z","dependencies_parsed_at":"2023-11-20T04:34:35.248Z","dependency_job_id":"6157f18b-2320-44c1-a939-de199c2cda05","html_url":"https://github.com/codegouvfr/react-dsfr","commit_stats":{"total_commits":1697,"total_committers":54,"mean_commits":"31.425925925925927","dds":"0.16971125515615793","last_synced_commit":"9ab632d35146c49855ac94683bb4e606d0f3b97e"},"previous_names":["codegouvfr/dsfr-react"],"tags_count":488,"template":false,"template_full_name":null,"purl":"pkg:github/codegouvfr/react-dsfr","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codegouvfr%2Freact-dsfr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codegouvfr%2Freact-dsfr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codegouvfr%2Freact-dsfr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codegouvfr%2Freact-dsfr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codegouvfr","download_url":"https://codeload.github.com/codegouvfr/react-dsfr/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codegouvfr%2Freact-dsfr/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30063349,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-03T18:21:05.932Z","status":"ssl_error","status_checked_at":"2026-03-03T18:20:59.341Z","response_time":61,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bluehats","design-system","dsfr","react","storybook","typescript"],"created_at":"2024-09-03T00:01:54.039Z","updated_at":"2026-03-03T22:01:12.046Z","avatar_url":"https://github.com/codegouvfr.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://github.com/codegouvfr/react-dsfr/releases/download/assets/dsfr-react_repo-card.png\"\u003e  \n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n    🇫🇷 \u003ci\u003eReact intégration pour le \u003ca href=\"https://www.systeme-de-design.gouv.fr/\"\u003eSystem de design du gouvernement français (alias DSFR)\u003c/a\u003e\u003c/i\u003e 🇫🇷 \n    \u003cbr\u003e\n    \u003cbr\u003e\n    \u003ca href=\"https://github.com/codegouvfr/react-dsfr/actions\"\u003e\n      \u003cimg src=\"https://github.com/codegouvfr/react-dsfr/actions/workflows/ci.yaml/badge.svg\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/@codegouvfr/react-dsfr\"\u003e\n      \u003cimg src=\"https://img.shields.io/npm/v/@codegouvfr/react-dsfr?logo=npm\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://bundlephobia.com/package/@codegouvfr/react-dsfr\"\u003e\n      \u003cimg src=\"https://img.shields.io/bundlephobia/minzip/@codegouvfr/react-dsfr\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/codegouvfr/react-dsfr/blob/main/LICENSE\"\u003e\n      \u003cimg src=\"https://img.shields.io/npm/l/@codegouvfr/react-dsfr\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://components.react-dsfr.codegouv.studio\"\u003eDocumentation des composants\u003c/a\u003e\n  -\n  \u003ca href=\"https://react-dsfr.codegouv.studio\"\u003eguides\u003c/a\u003e\n  -\n  \u003ca href=\"https://stackblitz.com/edit/nextjs-j2wba3?file=pages/index.tsx\"\u003eessai immédiat\u003c/a\u003e\n\u003c/p\u003e\n\n\u003e AVERTISSEMENT : Ce système de conception est uniquement destiné à être utilisé pour les sites web officiels des services publics français.  \n\u003e Son objectif principal est de faciliter l'identification des sites gouvernementaux par les citoyens. [Voir les conditions](https://www.systeme-de-design.gouv.fr/utilisation-et-organisation/perimetre-d-application).\n\nCe module est une boîte à outils avancée qui tire parti de [@gouvfr/dsfr](https://github.com/GouvernementFR/dsfr), l'implémentation en JS/CSS vanilla du DSFR.\n\n\u003ca href=\"https://youtu.be/5q88JgXUAY4\"\u003e\n  \u003cimg width=\"1712\" alt=\"image\" src=\"https://user-images.githubusercontent.com/6702424/224423044-c1823249-eab6-4844-af43-d059c01416af.png\"\u003e\n\u003c/a\u003e\n\n\u003e Bien que ce module soit écrit en TypeScript, l'utilisation de TypeScript dans votre application est optionnelle (mais recommandée car elle apporte des avantages exceptionnels à la fois pour vous et votre base de code).\n\n-   [x] API entièrement TypeSafe, bien documentée.\n-   [x] Toujours à jour avec les dernières évolutions du DSFR.\n        Code et Types générés à partir de [`@gouvfr/dsfr`](https://www.npmjs.com/package/@gouvfr/dsfr)`/dist/dsfr.css`.\n-   [x] Exactement le même aspect et ressenti qu'avec [@gouvfr/dsfr](https://www.npmjs.com/package/@gouvfr/dsfr).\n-   [x] Pas de [flash blanc lors du rechargement dans la configuration SSR](https://github.com/codegouvfr/@codegouvfr/react-dsfr/issues/2#issuecomment-1257263480).\n-   [x] La plupart des composants sont prêts pour les composants serveur. Les autres sont étiquetés avec `\"use client\";`\n-   [x] [Intégration parfaite avec tous les principaux frameworks React : Next.js (PagesDir et AppDir), Create React App, Vite](https://react-dsfr.codegouv.studio/).\n-   [x] (Presque) Tous [les composants](https://www.systeme-de-design.gouv.fr/elements-d-interface) sont [implémentés](https://components.react-dsfr.codegouv.studio/)\n-   [x] Trois distributions modulables, choisissez les composants que vous importez. (Ce n'est pas tout dans un gros bundle .js)\n-   [x] Intégration optionnelle avec [MUI](https://mui.com/). Si vous utilisez des composants MUI, ils seront\n        automatiquement adaptés pour ressembler aux [composants DSFR](https://www.systeme-de-design.gouv.fr/elements-d-interface). Voir [documentation](https://react-dsfr.codegouv.studio/mui-integration).\n-   [x] Permet le CSS in JS. [Documentation](https://react-dsfr.codegouv.studio/css-in-js)\n-   [x] i18n en option, les textes intégrés peuvent être affichés en plusieurs langues et l'utilisateur peut fournir des traductions supplémentaires.\n-   [x] [Support des bibliothèques de routage](https://react-dsfr.codegouv.studio/routing) comme react-router.\n\n\u003e 💡 Besoin de pages de connexion et d'inscription prêtes à l'emploi et conformes au DSFR ? Consultez [keycloak-theme-dsfr](https://github.com/codegouvfr/keycloak-theme-dsfr).\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://react-dsfr.codegouv.studio/\"\u003e🚀 Commencez ici 🚀 \u003c/a\u003e\n\u003c/p\u003e\n\n# Gouvernance\n\nCe module est un produit du pôle Logiciel libre et open source d'[Etalab](https://code.gouv.fr/en/mission/).\n\nCe projet est co-maintenu par des fonctionnaires de diverses administrations françaises :\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## Développement\n\n```bash\ngit clone https://github.com/codegouvfr/react-dsfr\ncd react-dsfr\nyarn\n\n# Démarrer storybook\nyarn storybook\n\n# Démarrer les applications de test\nyarn start-cra  # Pour tester dans une configuration Create React App\nyarn start-vite # Pour tester dans une configuration Vite\nyarn start-next-pagesdir # Pour tester dans une configuration Next.js 13 PagesDir (la configuration par défaut)\nyarn start-next-appdir # Pour tester dans une configuration Next.js 13 AppDir\n\n# Exécuter tous les tests unitaires (test/runtime):\nyarn test\n# Exécuter uniquement test/runtime/cssVariable.test.ts (par exemple)\nnpx vitest -t \"Resolution of CSS variables\"\n```\n\n### Vous voulez contribuer ?\n\nMerci ! Voir [le guide de contribution](https://github.com/codegouvfr/react-dsfr/blob/main/CONTRIBUTING.md).\n\n### Comment publier une nouvelle version sur NPM, comment sortir une version bêta\n\nCe dépôt a été initialisé à partir de [garronej/ts-ci](https://github.com/garronej/ts-ci), consultez la\ndocumentation de ce starter pour comprendre le cycle de vie de ce dépôt.\n\n## Cas d'utilisation\n\nQuelques projets qui utilisent `@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","funding_links":[],"categories":["TypeScript","Design System de l'État (DSFR)","Uncategorized"],"sub_categories":["react-dsfr","Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodegouvfr%2Freact-dsfr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodegouvfr%2Freact-dsfr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodegouvfr%2Freact-dsfr/lists"}