react-dsfr

Bibliothèque React pour le Design System de l'État français. Package : @codegouvfr/react-dsfr.

Import pattern

Chaque composant a son propre chemin d'import :

import { Button } from "@codegouvfr/react-dsfr/Button";
import { Alert } from "@codegouvfr/react-dsfr/Alert";
import { Card } from "@codegouvfr/react-dsfr/Card";
// etc.

Setup Next.js App Router

⚠️ Pattern obligatoire : sans getScriptToRunAsap() dans <head>, le mode sombre cause un flash blanc visible au chargement (régression la plus courante). Le code ci-dessous est le minimum incompressible — ne pas écrire un layout.tsx plus simple.

Pattern minimal en 3 fichiers (Next.js 14+ App Router, react-dsfr v1.30+), aligné sur le starter officiel react-dsfr (dsfr-bootstrap) :