# React Dsfr
> Créer des interfaces React conformes au Design System de l'État français (DSFR) avec @codegouvfr/react-dsfr. Utiliser cette skill quand l'utilisateur demande de créer des pages, composants ou interfaces en React utilisant le DSFR, quand il mentionne react-dsfr, le design system de l'État, ou quand le projet utilise @codegouvfr/react-dsfr. Couvre les composants natifs react-dsfr (pas MUI), le routing, les icônes, les couleurs et les patterns de mise en page.
- Skill: `etalab-ia/react-dsfr` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add etalab-ia/react-dsfr`
- Raw SKILL.md: https://api.skillmd.com/api/skills/etalab-ia/react-dsfr/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: etalab-ia (https://skillmd.com/u/etalab-ia)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/etalab-ia/react-dsfr
---
# 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 :
```tsx
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 ``, 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`) :
**1. `src/dsfr-bootstrap/defaultColorScheme.ts`** — constante partagée par le layout (serveur) et le provider (client) :
```tsx
export const defaultColorScheme = "system" as const;
```
**2. `src/dsfr-bootstrap/index.tsx`** — wrapper `"use client"` qui importe `Link` :
```tsx
"use client";
import {
DsfrProviderBase,
StartDsfrOnHydration,
type DsfrProviderProps
} from "@codegouvfr/react-dsfr/next-app-router";
import { defaultColorScheme } from "./defaultColorScheme";
import Link from "next/link";
declare module "@codegouvfr/react-dsfr/next-app-router" {
interface RegisterLink {
Link: typeof Link;
}
}
export function DsfrProvider(props: DsfrProviderProps) {
return (
);
}
export { StartDsfrOnHydration };
```
**3. `src/app/layout.tsx`** — composant serveur, ne passe au provider que des props sérialisables :
```tsx
import { createGetHtmlAttributes } from "@codegouvfr/react-dsfr/next-app-router/getHtmlAttributes";
import { getScriptToRunAsap } from "@codegouvfr/react-dsfr/useIsDark/scriptToRunAsap";
import "@codegouvfr/react-dsfr/dsfr/dsfr.min.css";
import "@codegouvfr/react-dsfr/dsfr/utility/icons/icons.main.min.css";
import { DsfrProvider, StartDsfrOnHydration } from "../dsfr-bootstrap";
import { defaultColorScheme } from "../dsfr-bootstrap/defaultColorScheme";
const { getHtmlAttributes } = createGetHtmlAttributes({ defaultColorScheme });
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
**Pourquoi le wrapper `"use client"` ?** `layout.tsx` est un composant serveur ; `DsfrProviderBase` est un composant client (module `"use client"` dans le package). Le pattern officiel react-dsfr garde l'import de `Link` et la déclaration `RegisterLink` dans un module client dédié, le layout serveur ne passant que des props sérialisables (`lang`, `children`). `defaultColorScheme` vit dans son propre module (hors `"use client"`) car il est lu des deux côtés de la frontière serveur/client.
**Trois éléments critiques** (ne pas omettre) :
1. **`createGetHtmlAttributes()`** : pose `data-fr-scheme` / `data-fr-theme` / `suppressHydrationWarning` sur `` côté SSR
2. **`getScriptToRunAsap()` dans ``** : script inline qui détecte le thème (localStorage ou `prefers-color-scheme`) **avant le premier paint CSS** — c'est lui qui élimine le flash. `nonce: undefined` ne vaut qu'en dev ; **sous CSP**, passer un `nonce` par requête (cf. [references/setup.md](references/setup.md#pattern-1--recommandé--sans-transpilepackages-imports-directs))
3. **`StartDsfrOnHydration`** : re-scan du DOM après hydratation React pour bind les `Display`, modales, accordéons (sans ça, les boutons `aria-controls` sont muets au clic)
**Noms react-dsfr v1.30+** : `DsfrProviderBase`, `StartDsfrOnHydration`, `createGetHtmlAttributes`, `DsfrHeadBase`. Les anciens noms (`DsfrProvider`, `StartDsfr`, `getHtmlAttributes`, `DsfrHead`) **n'existent plus dans le package** — ne pas les écrire. (Le wrapper local `DsfrProvider` créé ci-dessus est le nôtre, calqué sur le starter officiel — ce n'est pas un export du package.)
Cette approche n'a **pas besoin de `transpilePackages`** dans `next.config.mjs` (les imports directs depuis `.../getHtmlAttributes` et `.../scriptToRunAsap` évitent le tree-shake de `DsfrHead.js` qui tire les `.woff2`). Pour les variantes (avec `DsfrHeadBase` + `transpilePackages`, icônes dynamiques via `iconId`, re-init manuelle DSFR), voir [references/setup.md](references/setup.md#nextjs-app-router).
## Routing et liens
Enregistrer le composant `Link` du framework une seule fois au démarrage. Tous les composants react-dsfr utilisant `linkProps` s'en serviront automatiquement.
- Liens internes : utilisent le routeur (client-side navigation)
- URLs externes (`https://...`) : rendus comme `` classiques
- `href="#"` + `onClick` : convertis automatiquement en `