1 of 15

v1

Initial setup

Setup @codegouvfr/react-dsfr in your project or start from a template

If you already had the DSFR installed in your project, let's start from scratch:

Remove the import ofdsfr.css, dsfr.module.js the favicon and the fonts.
Remove the data-fr-scheme (and data-fr-theme ) attribude from your <html/> tag

And add this file to the root of your project, to enable pre & post scripts with pnpm:

When we say Yarn we usually refer to Yarn 1.x as most dev teams (Including me) havent upgraded to the newest version (for good reasons).

If you want to use Yarn Berry you be aware that pre- post- scripts aren't supported.

So you must do something like "dev": "copy-dsfr-to-public && next dev" (same thing for start)

Also you must configure it so it uses node_modules (sorry)

If you want a more complete starter with a Ready yo use stack that includes routing, autentication, internationalisation ect. you can also use this starter instead:

Add these three scripts to your package.json:

Trigger the execution of the postinstall script by running:

Add the following tags in the <head />

You're all set! Next step for you is to setup the integration with your routing library (react-router for example).

You are in this case if you have a pages/ directory at the root of your project.

The create-react-app project is no longer being maintained. If you are starting a new project you'll probably be beter off with Vite.

Add these three scripts to your package.json:

Trigger the execution of the postinstall script by running:

Add the following code in the <head />

You're all set! Next step for you is to setup de integration with your routing library (react-router for example)

Avoiding or flash of unstyled text (FOUT)

You can avoid having a flash of unstyled text by preloading the font variant used on your homepage (look in the network tab of your browser dev tools what are the font downloaded initially).

Add the following tags in the <head />

Add the following code in the <head />

Integration with routing libs

Like react-router or Next.js file system based route.

Depending on the framework or routing library you are using, links between pages are not handled the same way.

Usually, you'll have a <Link /> component provided by your routing library of choice. You need to let react-dsfr know about it so that whenever a link is needed in a DSFR component, you can provide the correct props for your <Link /> component.

When registering your Link component, its props type will propagate to the react-dsfr API.

Class names type safety

You can't apply your custom classes using fr.cx(), you'll get type error, but you can combine a regular cx() or clsx() function and fr.cx(). Example:

import { useStyles } from "tss-react/dsfr";
import { fr } from "@codegouvfr/react-dsfr";  

type Params = {
    className?: string;
};

export function MyComponent(params: Params){

   const { className } = params;  
   
   const { cx } = useStyles();
   
   return (
       <div className={cx(fr.cx("fr-p-10v"), className)}>
           //...
       </div>
   );

}

Colors

Most of the time, when using the provided components from the Design System for French Republic (DSFR), there is no need to explicitly manipulate colors. These components are designed with a set of default colors that aim to maintain consistency and harmony across your application or website. However, when you are crafting a new component or customizing existing ones, it becomes essential to select the appropriate color scheme that aligns with the DSFR guidelines for your specific use case.

To assist you in effortlessly navigating through the DSFR color palette and selecting the perfect hues for your components, we provide you with a user-friendly color picker tool. This tool is designed to simplify the process of choosing colors that adhere to the DSFR’s design principles, ensuring that your custom components not only look visually appealing but also maintain a cohesive and unified design language.

Components

The components are documented individually on a separate website.

Customization

What to do if you want to customize the components beyond what the props allow.

The `classes` property

Every component of react-dsfr accepts an optional classes property that enables you to customize their look at a fine grained level.

Creating a custom component

Icons

You can go and search for a keyword:

When you find something fitting, you can copy paste the class name ( starting with ri- ) and use it anywhere you would have used a .fr-icon-xxxx ! 🚀

Example:

No need to worry about importing the correct icons file.

It's done automatically for you when you.

The fr.cx() utility is also handy for autocompleting the icons that are supported:

CSS in JS

Compatibility with solutions like styled-components, emotion and TSS.

This enables to write DSFR compliant CSS in JS code, since we are able to expose function that are the equivalent of the DSFR utility classes.

spacing

For ensuring the spacing between elements is consistent throughout the website.

The above code is equivalent to:

Which is in turn equivalent to:

breakpoints

For writing responsive UIs with media query (@media).

colors

Using the theme object that holds the colors decisions and options.

Using CSS variables (recommended)

This approad is React agnostic and yield the best performances.

Using HEX color code

Some third party libraries might require you to provide explicit value as colors.

When CSS variable references doesn't work you can do:

useIsDark()

You can access the active mode (isDark: true/false) in the theme object. However, if you want to manually switch the mode, you can use setIsDark(true/false) .

If you want to use the isDark value in your styles:

useBreakpointsValuesPx()

It returns the values in pixel of the different breakpoint ("xs", "md", "lg", "xl") based on the current root font size.

It can be used to do stuffs like this, geting the number of column of a responsive layout in JavaScript:

Be carefull though, favor using fr.breakpoints over client size mesurement and computation.

On the backend you can't know ahead of time the size of the screen of your users so this kind of approach will result in a flickering in SSR setups.

For example, your backend has no clue the size of the device making the request so it renders for a 1080p screen but the device making the request was, in fact, an iPhone and the first print is fully broken, the app becomes usable only after hydration.

Long story short, use this only if you are building an SPA.

Internationalization

DSFR components contain hard coded strings.

These strings can be switched from a langage to another with a provider.

Integration with i18n libraries

import { useLang } from "i18n";

startDsfrReact({ 
  defaultColorScheme: "system",
  useLang: function useLangDsfr() {
        const { lang } = useLang();
        return lang;
  }
});

DISCLAMER: I'm the author of i18nifty.

Assuming you have configured Next so that you have a lang prop provided to you in the main layout:

app/[lang]/layout.txs

import { i18n } from '../../i18n-config'

export async function generateStaticParams() {
  	return i18n.locales.map((locale) => ({ lang: locale }))
}

export default function Root({
  children,
  params,
}: {
  children: React.ReactNode
  params: { lang: string }
}) {
	const { lang } = params;
	return (
		<html
			{...getHtmlAttributes({ defaultColorScheme, lang })}
		>
			<head>
			{/*...*/}
			</head>
			<body>
				<DsfrProvider lang={lang}>
					{/*...*/}
				</DsfrProvider>
			</body>
		</html>
	);
}

Assuming you have enabled internationalized routing:

pages/_app.tsx

import { useRouter } from "next/router";

const { withDsfr, dsfrDocumentApi } = createNextDsfrIntegrationApi({
	"defaultColorScheme": "system",
	Link,
	useLang: () => {
		const { locale = "fr" } = useRouter();
		return locale;
	}
});

It's up to you to replace in the following example "fr" by the desired locale using to tooling exposed by your i18n library.

startDsfrReact({ 
  defaultColorScheme: "system",
  useLang: () => "fr"
});

Adding translations or overwriting default text

You can add translation for extra language on a component basis, like so:

import { addAlertTranslations } from "@codegouvfr/react-dsfr/Alert";

addAlertTranslations({
    lang: "zh-CN",
    messages: {
        hide message: "隐藏消息"
    }
});

The above code adds chinese (zh-CN) support for the Alert component. You can call addAlertTranslations() wherever, just be sure it's evaluated before the first use of the component, here <Alert />.

You can also use this approach for overwiting the default text. Example:

import { addDisplayTranslations } from "@codegouvfr/react-dsfr/Display";

addDisplayTranslations({
	lang: "fr",
	messages: {
		"dark theme": "Thème sombre 🤩",
	}
});

With Next App Router

When utilizing Next in App Router mode, it's crucial to accurately add or overwrite translations at the proper location.

For components that you use as server components, such as <Header />, <Footer />, or the <Display /> modal, you should make calls to addXxxTranslation within app/layout.tsx.

Importing assets

How to import images, SVGs and other static DSFR resources

Let's see how we would translate this into React.

MUI integration

Use MUI components in your App or DSFRify your website build with MUI.

First of all you'll have to remove all usage of <ThemeProvider /> and createTheme() from your codebase (if any) then implement the following approach:

Custom variable in MUI theme

In this example we have augmented the MUI theme so it was possible to call theme.custom.isDarkModeEnabled.

The demo setups for Vite, Next ans create-react-app all commes with MUI already setup. You can find aditional informations about this tool here:

Next.js: Improving first print

In Next.js setup, on initial page load you may experience a few frames where MUI components aren't aware that the dark mode is enabled.

You can eradicate these few frames on subsequent page load by telling Next.js to perform SSR in the correct color scheme for the user:

Setting up Next.js + MUI + react-dsfr

Be aware that the API have changed since this video was recorded.

All demo setup are preconfigured with MUI installed. \

Storybook

Setting up Storybook in your react-dsfr project.

Storybook is an open-source tool for developing and testing UI components in isolation, allowing you to create and refine components independently from the app's business logic.

Minimal setup

If you use Storybook as an internal devloppement tool only. You don't need to customize much.

First follow the official instruction to setup Storybook in your meta framework of choice:

Here are the edit you need to apply to the default setup:

Bells and whistles

If you wish to publish your storybook as component library showecase you might want to go the extra miles and customize the Manager to add top level darkMode switch, load the Marianne font, provide a language switch ect.

If you want a fully DSFRised Storybook setup you can use this setup as reference:

Don't forget to add this extra dependency:

Lastly apply the following reference .storybook directory in your setup. Be sure to carefully merge the .storybook/main.ts so you don't overwrite specific configuration required by your meta framework.

Analytics

Track your audience engagement and gain insights into how citizens interact with your website.

Message from the @gouvfr/dsfr team:

Activating it equips you with the capabilities to accurately track user interactions with your application, including specific buttons they click and pages they navigate. To comply with GDPR regulations, it's crucial to request user consent before implementing this detailed level of tracking.

Presented here is an illustrative example demonstrating how to initialize the Eulerian integration and solicit user consent for its usage.

You may refer to the documentation of the consentManagement utility via the following link:

To operate effectively, Eulerian requires certain parameters, which are provided upon initial registration on the Eulerian platform. This example includes only those. For a complete list and descriptions of accepted parameters, refer to the following link:

In-depth documentation elaborating on all these parameters can be found here:

For efficient tracking of interactions with various website elements, it's essential that each DSFR component is assigned a unique ID. This allows you to distinguish between different elements via the Eulerian dashboard metrics.

Each component of the react-dsfr toolkit can be explicitly given an ID prop. In the event you don't assign one, react-dsfr will make an effort to generate comprehensible IDs that aid in component identification.

Content-Security-Policy

Add security to you application

react-dsfr supports strict Content-Security-Policy headers.

Nonce

Add your Content-Security-Policy either by configuring your server, or with the meta tag. Remember that a nonce MUST be generated per requests. Add the nonce to react-dsfr

src/main.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import { App } from "./App";
import { startReactDsfr } from "@codegouvfr/react-dsfr/spa";

const nonce = "123456789"; // you have to inject it on render
startReactDsfr({ defaultColorScheme: "system", nonce });

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

To get the nonce, you have to enable SSR with Vite and either inject the value in process.env or in a additional custom meta tag in your index.html. You can also infer it by using the content of the Content-Security-Policy meta tag if you configured the header this way. For more information about SSR in Vite see the following page.

You are in this case if you have a app/ directory at the root of your project.

First configure the nonce in the <DsfrHead /> tag in your root layout:

app/layout.tsx

import { DsfrHead } from "@codegouvfr/react-dsfr/next-appdir/DsfrHead";
import { DsfrProvider } from "@codegouvfr/react-dsfr/next-appdir/DsfrProvider";
import { getHtmlAttributes } from "@codegouvfr/react-dsfr/next-appdir/getHtmlAttributes";
import { StartDsfr } from "./StartDsfr";
import { defaultColorScheme } from "./defaultColorScheme";
import Link from "next/link";
import { headers } from "next/headers";

export default function RootLayout({ children }: { children: JSX.Element; }) {
  const nonce = headers().get("x-nonce") ?? undefined;
  //NOTE: The lang parameter is optional and defaults to "fr"
  const lang = "fr";
  return (
    <html {...getHtmlAttributes({ defaultColorScheme, lang })} >
      <head>
        <StartDsfr />
        <DsfrHead Link={Link} nonce={nonce} />
      </head>
      <body>
        <DsfrProvider lang={lang}>
          {children}
        </DsfrProvider>
      </body>
    </html>
  );
}

The X-Nonce header is forwarded by the middleware.ts as suggested by Next.js.

It important to remember that reading headers in the root layout turns all pages to dynamic rendering opt-in. This is mandatory for nonce.

If you use the NextAppDirEmotionCacheProvider, don't forget to add the nonce to it accordingly to what Emotion and MUI needs: <NextAppDirEmotionCacheProvider options={{ "key": "css", nonce, prepend: true }}>

Then you have to tell react-dsfr to read and forward the nonce injected to all other scripts and styles by adding doCheckNonce: true; to the startReactDsfr() function:

app/StartDsfr.tsx

"use client";

import { startReactDsfr } from "@codegouvfr/react-dsfr/next-appdir";
import { defaultColorScheme } from "./defaultColorScheme";
import Link from "next/link";

declare module "@codegouvfr/react-dsfr/next-appdir" {
  interface RegisterLink { 
    Link: typeof Link;
  }
}

startReactDsfr({ defaultColorScheme, Link, doCheckNonce: true });

export function StartDsfr(){
  //Yes, leave null here.
  return null;
}

Next.js with old Pages Router is not supported. As per Next.js suggests, we recommended migrating to App Router.

Create React App by itself is a way to build static sites which by definition cannot handle dynamic headers (like CSP) per request as no server will serve the pages. Before getting into nonce configuration, you have ponder whether or not you need that level of security within your static app, and if so, choosing a solution to generate and inject the nonce into your app.

Once your injected the nonce into your app, add the following code:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { startReactDsfr } from "@codegouvfr/react-dsfr/spa";

const nonce = "123456789" // have to be dynamic and injected
startReactDsfr({ defaultColorScheme: "system", nonce });

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Trusted Types Policy

Trusted Types are supported out-of-the box.

When configuring your CSP you only have to add our policy names to your list:

header configuration

Content-Security-Policy:
    require-trusted-types-for 'script';
    trusted-types react-dsfr react-dsfr-asap;

We register two policies with only the createHTML hook. Policy names are react-dsfr and react-dsfr-asap

Custom policy name

You can configure a custom policy name if you need to by adding the trustedTypesPolicyName options to the startReactDsfr() function.

In Next.js App Router, trustedTypesPolicyName must also be set to the <DsfrHead /> component.

When a custom name is set, the suffix -asap is used for the second policy. Don't forget to add both to your header configuration.

Example:

If you set trustedTypesPolicyName: "my-app"

You header must be configured like so: trusted-types my-app my-app-asap;

Publishing a NPM modules that depends on react-dsfr

You want to publish your own library of components that depends on react-dsfr?

Here is an example:

I recommend starting from ts-ci for any project meant to be published on NPM

The main takeway:

Do not add "postinstall": "copy-dsfr-to-public" in your library's package.json. It's the responsability of the host app to do so.
If you rely on MUI, @mui/material @emotion/styled and @emotion/react should be peer dependencies as well. You should add those modules as devDependencies.
If you use TSS: react-dsfr dosen't need to be a peerDependencies but @emotion/react does, you do not configure the emotion cache in your lib, that's the the responsability of the host app.

Contributing

Thank you for your willingness to contribute, here is the guide:

Integration with routing libs

Like react-router or Next.js file system based route.

Depending on the framework or routing library you are using, links between pages are not handled the same way.

When registering your Link component, its props type will propagate to the react-dsfr API.

This is how you are instructed to set it up by default (no change from the guide)

app/StartDsfr.tsx

"use client";

import { startReactDsfr } from "@codegouvfr/react-dsfr/next-appdir";
import { defaultColorScheme } from "./defaultColorScheme";
import Link from "next/link";

declare module "@codegouvfr/react-dsfr/next-appdir" {
    interface RegisterLink { 
        Link: typeof Link;
    }
}

startReactDsfr({ 
	defaultColorScheme, 
	Link
});

export default function StartDsfr(){
        //Yes, leave null here.
	return null;
}

Examples

Client side routing

import { Card } from "@codegouvfr/react-dsfr/Card";

<Card
  linkProps={{
    to: "/my-page"
  }}
/>

The <Link /> component from react-router will be used.

External links:


linkProps={{
  href: "https://example.com"
  target="_blank"
}}

When react-dsfr detects that the href points to an external website it will use a regular <a/> instead of the <Link /> component.

Mailto links


linkProps={{
  href: "mailto:contact@code.gouv.fr"
}}

Same goes for the mailto links.

Converting a link to a button

linkProps={{  
  href: "#"
  onClick: ()=> { /* ... */ }
}}

React-dsfr will automatically convert the underlying HTML element into a <button /> that looks like a link for better Accessibility.

pages/_app.tsx

import type { AppProps } from "next/app";
import { fr } from "@codegouvfr/react-dsfr";
import { createNextDsfrIntegrationApi } from "@codegouvfr/react-dsfr/next-pagesdir";
import Link from "next/link";

// Only in TypeScript projects
declare module "@codegouvfr/react-dsfr/next-pagesdir" {
    interface RegisterLink { 
        Link: typeof Link;
    }
}

const { 
    withDsfr,
    dsfrDocumentApi
} = createNextDsfrIntegrationApi({
    defaultColorScheme: "system",
    Link
});

export { dsfrDocumentApi };

function App({ Component, pageProps }: AppProps) {
    return <Component {...pageProps} />;
}

export default withDsfr(App);

Examples

Client side routing

import { Card } from "@codegouvfr/react-dsfr/Card";

<Card
  linkProps={{
    href: "/my-page"
  }}
/>

The <Link /> component from react-router will be used.

External links:


linkProps={{
  href: "https://example.com"
  target="_blank"
}}

When react-dsfr detects that the href points to an external website it will use a regular <a/> instead of the <Link /> component.

Mailto links


linkProps={{
  to: "mailto:contact@code.gouv.fr"
}}

Same goes for the mailto links.

Converting a link to a button

linkProps={{  
  to: "#"
  onClick: ()=> { /* ... */ }
}}

React-dsfr will automatically convert the underlying HTML element into a <button /> that looks like a link for better Accessibility.

import React from "react";
import ReactDOM from "react-dom/client";
import { startReactDsfr } from "@codegouvfr/react-dsfr/spa";
import { Link, type LinkProps } from "@tanstack/react-router";

startReactDsfr({ 
    defaultColorScheme: "system", 
    Link 
});

declare module '@codegouvfr/react-dsfr/spa' {
  interface RegisterLink {
    Link: (props: LinkProps) => JSX.Element
  }
}

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
    <React.StrictMode>
            {/* ... */}
    </React.StrictMode>
);

After that you will have type safety on the linkProps, you can use the to property as you would on the react router's <Link /> component! Note that if you want to link to external website (or use mailto:) you can use the href property instead of the to property (see below).

If you have a link that is a mailto: or a link to an external page, use the href property instead of to. Example:

<Header
    navigation={[
        {
            text: "Contact",
            linkProps: {
                href: "mailto:support@data.gouv.fr"
            }
        },
        {
            text: "Écrire au président"
            linkProps: {
                href: "https://www.elysee.fr/ecrire-au-president-de-la-republique/"
            }
        }
    ]}
/>

In consequence there isn't anything to setup.

Examples

Client side routing

import { Card } from "@codegouvfr/react-dsfr/Card";
import { routes } from "...";

<Card
  linkProps={routes.myPage().link}
/>

import React from "react";
import ReactDOM from "react-dom/client";
import { startReactDsfr } from "@codegouvfr/react-dsfr/spa";
import { Link } from "react-router-dom";
startReactDsfr({ 
    defaultColorScheme: "system", 
    Link 
});

//Only in TypeScript projects
declare module "@codegouvfr/react-dsfr/spa" {
    interface RegisterLink { 
        Link: typeof Link;
    }
}

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
    <React.StrictMode>
            {/* ... */}
    </React.StrictMode>
);

Examples

Client side routing

import { Card } from "@codegouvfr/react-dsfr/Card";

<Card
  linkProps={{
    to: "/my-page"
  }}
/>

The <Link /> component from react-router will be used.

External links:


linkProps={{
  to: "https://example.com"
  target="_blank"
}}

When react-dsfr detects that the to points to an external website it will use a regular <a/> Instead of the <Link /> component.

Mailto links

linkProps={{
  to: "mailto:contact@code.gouv.fr"
}}

Same goes for the mailto links.

Converting a link to a button

linkProps={{  
  to: "#"
  onClick: ()=> { /* ... */ }
}}

React-dsfr will automatically convert the underlying HTML element into a <button /> that looks like a link for better Accessibility.

You should be able to infer what needs to be done refering to the react-router instructions.

If the library you are using doesn't export a <Link /> (like type-route for example) component, there isn't anything to do.

This is how you are instructed to set it up by default (no change from the guide)

app/StartDsfr.tsx

"use client";

import { startReactDsfr } from "@codegouvfr/react-dsfr/next-appdir";
import { defaultColorScheme } from "./defaultColorScheme";
import Link from "next/link";

declare module "@codegouvfr/react-dsfr/next-appdir" {
    interface RegisterLink { 
        Link: typeof Link;
    }
}

startReactDsfr({ 
	defaultColorScheme, 
	Link
});

export default function StartDsfr(){
        //Yes, leave null here.
	return null;
}

Examples

Client side routing

import { Card } from "@codegouvfr/react-dsfr/Card";

<Card
  linkProps={{
    to: "/my-page"
  }}
/>

The <Link /> component from react-router will be used.

External links:


linkProps={{
  href: "https://example.com"
  target="_blank"
}}

When react-dsfr detects that the href points to an external website it will use a regular <a/> instead of the <Link /> component.

Mailto links


linkProps={{
  href: "mailto:contact@code.gouv.fr"
}}

Same goes for the mailto links.

Converting a link to a button

linkProps={{  
  href: "#"
  onClick: ()=> { /* ... */ }
}}

React-dsfr will automatically convert the underlying HTML element into a <button /> that looks like a link for better Accessibility.

This is how you are instructed to set it up by default (no change from the guide)

pages/_app.tsx

import type { AppProps } from "next/app";
import { fr } from "@codegouvfr/react-dsfr";
import { createNextDsfrIntegrationApi } from "@codegouvfr/react-dsfr/next-pagesdir";
import Link from "next/link";

// Only in TypeScript projects
declare module "@codegouvfr/react-dsfr/next-pagesdir" {
    interface RegisterLink { 
        Link: typeof Link;
    }
}

const { 
    withDsfr,
    dsfrDocumentApi
} = createNextDsfrIntegrationApi({
    defaultColorScheme: "system",
    Link
});

export { dsfrDocumentApi };

function App({ Component, pageProps }: AppProps) {
    return <Component {...pageProps} />;
}

export default withDsfr(App);

Example .

Examples

Client side routing

import { Card } from "@codegouvfr/react-dsfr/Card";

<Card
  linkProps={{
    href: "/my-page"
  }}
/>

The <Link /> component from react-router will be used.

External links:


linkProps={{
  href: "https://example.com"
  target="_blank"
}}

When react-dsfr detects that the href points to an external website it will use a regular <a/> instead of the <Link /> component.

Mailto links


linkProps={{
  to: "mailto:contact@code.gouv.fr"
}}

Same goes for the mailto links.

Converting a link to a button

linkProps={{  
  to: "#"
  onClick: ()=> { /* ... */ }
}}

React-dsfr will automatically convert the underlying HTML element into a <button /> that looks like a link for better Accessibility.

Due to the fact that is also implementing module augmentation it's just a tiny bit less straight forward to set up but it works great!

import React from "react";
import ReactDOM from "react-dom/client";
import { startReactDsfr } from "@codegouvfr/react-dsfr/spa";
import { Link, type LinkProps } from "@tanstack/react-router";

startReactDsfr({ 
    defaultColorScheme: "system", 
    Link 
});

declare module '@codegouvfr/react-dsfr/spa' {
  interface RegisterLink {
    Link: (props: LinkProps) => JSX.Element
  }
}

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
    <React.StrictMode>
            {/* ... */}
    </React.StrictMode>
);

If you have a link that is a mailto: or a link to an external page, use the href property instead of to. Example:

<Header
    navigation={[
        {
            text: "Contact",
            linkProps: {
                href: "mailto:support@data.gouv.fr"
            }
        },
        {
            text: "Écrire au président"
            linkProps: {
                href: "https://www.elysee.fr/ecrire-au-president-de-la-republique/"
            }
        }
    ]}
/>

unlike most routing library doesn't export a <Link /> component, <a /> are used directly.

In consequence there isn't anything to setup.

Examples

Client side routing

import { Card } from "@codegouvfr/react-dsfr/Card";
import { routes } from "...";

<Card
  linkProps={routes.myPage().link}
/>

Example .

If you are starting a new project you might want to use in place of as it is, at least in my opignion a much better routing library.

import React from "react";
import ReactDOM from "react-dom/client";
import { startReactDsfr } from "@codegouvfr/react-dsfr/spa";
import { Link } from "react-router-dom";
startReactDsfr({ 
    defaultColorScheme: "system", 
    Link 
});

//Only in TypeScript projects
declare module "@codegouvfr/react-dsfr/spa" {
    interface RegisterLink { 
        Link: typeof Link;
    }
}

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
    <React.StrictMode>
            {/* ... */}
    </React.StrictMode>
);

Everywhere a DSFR component accepts a xxxLinkProps you are expected to provide an object with a to property because react-router's<Link /> component expects a to prop instead of the typical href. You can find an example .

Examples

Client side routing

import { Card } from "@codegouvfr/react-dsfr/Card";

<Card
  linkProps={{
    to: "/my-page"
  }}
/>

The <Link /> component from react-router will be used.

External links:


linkProps={{
  to: "https://example.com"
  target="_blank"
}}

When react-dsfr detects that the to points to an external website it will use a regular <a/> Instead of the <Link /> component.

Mailto links

linkProps={{
  to: "mailto:contact@code.gouv.fr"
}}

Same goes for the mailto links.

Converting a link to a button

linkProps={{  
  to: "#"
  onClick: ()=> { /* ... */ }
}}

React-dsfr will automatically convert the underlying HTML element into a <button /> that looks like a link for better Accessibility.

You should be able to infer what needs to be done refering to the react-router instructions.

If the library you are using doesn't export a <Link /> (like type-route for example) component, there isn't anything to do.

Content-Security-Policy

Add security to you application

react-dsfr supports strict Content-Security-Policy headers.

Nonce

nonce - HTML (HyperText Markup Language) | MDN

Add your Content-Security-Policy either by configuring your server, or with the meta tag. Remember that a nonce MUST be generated per requests. Add the nonce to react-dsfr

src/main.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import { App } from "./App";
import { startReactDsfr } from "@codegouvfr/react-dsfr/spa";

const nonce = "123456789"; // you have to inject it on render
startReactDsfr({ defaultColorScheme: "system", nonce });

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

This documentation is for .

You are in this case if you have a app/ directory at the root of your project.

The following assumes that you configured your CSP accordingly .

First configure the nonce in the <DsfrHead /> tag in your root layout:

app/layout.tsx

import { DsfrHead } from "@codegouvfr/react-dsfr/next-appdir/DsfrHead";
import { DsfrProvider } from "@codegouvfr/react-dsfr/next-appdir/DsfrProvider";
import { getHtmlAttributes } from "@codegouvfr/react-dsfr/next-appdir/getHtmlAttributes";
import { StartDsfr } from "./StartDsfr";
import { defaultColorScheme } from "./defaultColorScheme";
import Link from "next/link";
import { headers } from "next/headers";

export default function RootLayout({ children }: { children: JSX.Element; }) {
  const nonce = headers().get("x-nonce") ?? undefined;
  //NOTE: The lang parameter is optional and defaults to "fr"
  const lang = "fr";
  return (
    <html {...getHtmlAttributes({ defaultColorScheme, lang })} >
      <head>
        <StartDsfr />
        <DsfrHead Link={Link} nonce={nonce} />
      </head>
      <body>
        <DsfrProvider lang={lang}>
          {children}
        </DsfrProvider>
      </body>
    </html>
  );
}

The X-Nonce header is forwarded by the middleware.ts as suggested by Next.js.

It important to remember that reading headers in the root layout turns all pages to dynamic rendering opt-in. This is mandatory for nonce.

Then you have to tell react-dsfr to read and forward the nonce injected to all other scripts and styles by adding doCheckNonce: true; to the startReactDsfr() function:

app/StartDsfr.tsx

"use client";

import { startReactDsfr } from "@codegouvfr/react-dsfr/next-appdir";
import { defaultColorScheme } from "./defaultColorScheme";
import Link from "next/link";

declare module "@codegouvfr/react-dsfr/next-appdir" {
  interface RegisterLink { 
    Link: typeof Link;
  }
}

startReactDsfr({ defaultColorScheme, Link, doCheckNonce: true });

export function StartDsfr(){
  //Yes, leave null here.
  return null;
}

Next.js with old Pages Router is not supported. As per Next.js suggests, we recommended migrating to App Router.

Once your injected the nonce into your app, add the following code:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { startReactDsfr } from "@codegouvfr/react-dsfr/spa";

const nonce = "123456789" // have to be dynamic and injected
startReactDsfr({ defaultColorScheme: "system", nonce });

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Your framework isn't supported? Let's !

Trusted Types Policy

Trusted Types are supported out-of-the box.

When configuring your CSP you only have to add our policy names to your list:

header configuration

Content-Security-Policy:
    require-trusted-types-for 'script';
    trusted-types react-dsfr react-dsfr-asap;

We register two policies with only the createHTML hook. Policy names are react-dsfr and react-dsfr-asap

Custom policy name

You can configure a custom policy name if you need to by adding the trustedTypesPolicyName options to the startReactDsfr() function.

In Next.js App Router, trustedTypesPolicyName must also be set to the <DsfrHead /> component.

When a custom name is set, the suffix -asap is used for the second policy. Don't forget to add both to your header configuration.

Example:

If you set trustedTypesPolicyName: "my-app"

You header must be configured like so: trusted-types my-app my-app-asap;

Initial setup

Setup @codegouvfr/react-dsfr in your project or start from a template

If you already had the DSFR installed in your project, let's start from scratch:

Remove from your dependencies.
Remove the import ofdsfr.css, dsfr.module.js the favicon and the fonts.
Remove the data-fr-scheme (and data-fr-theme ) attribude from your <html/> tag

yarn add @codegouvfr/react-dsfr

npm install --save @codegouvfr/react-dsfr

pnpm add @codegouvfr/react-dsfr

And add this file to the root of your project, to enable pre & post scripts with pnpm:

.npmrc

enable-pre-post-scripts=true

When we say Yarn we usually refer to Yarn 1.x as most dev teams (Including me) havent upgraded to the newest version (for good reasons).

If you want to use Yarn Berry you be aware that pre- post- scripts aren't supported.

So you must do something like "dev": "copy-dsfr-to-public && next dev" (same thing for start)

Also you must configure it so it uses node_modules (sorry)

If you want a more complete starter with a Ready yo use stack that includes routing, autentication, internationalisation ect. you can also use this starter instead:

Using Nx monorepo? See .

Add these three scripts to your package.json:

package.json

"scripts": {
    "predev": "react-dsfr update-icons",
    "prebuild": "react-dsfr update-icons"
}

Trigger the execution of the postinstall script by running:

yarn # Or 'npm install' or 'pnpm install'

Add the following tags in the <head />

index.html

<link rel="apple-touch-icon" href="./node_modules/@codegouvfr/react-dsfr/favicon/apple-touch-icon.png" />
<link rel="icon" href="./node_modules/@codegouvfr/react-dsfr/favicon/favicon.svg" type="image/svg+xml" />
<link rel="shortcut icon" href="./node_modules/@codegouvfr/react-dsfr/favicon/favicon.ico" type="image/x-icon" />
<link rel="manifest" href="./node_modules/@codegouvfr/react-dsfr/favicon/manifest.webmanifest" crossorigin="use-credentials" />

<link rel="stylesheet" href="./node_modules/@codegouvfr/react-dsfr/main.css" />

src/main.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import { App } from "./App";
import { startReactDsfr } from "@codegouvfr/react-dsfr/spa";
startReactDsfr({ defaultColorScheme: "system" });

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

You're all set! Next step for you is to setup the integration with your routing library (react-router for example).

Integration with routing libs

yarn add @codegouvfr/react-dsfr
yarn add --dev sass
npx degit https://github.com/garronej/react-dsfr-next-appdir-demo/src/dsfr-bootstrap src/dsfr-bootstrap

next.config.ts

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  webpack: config => {
    config.module.rules.push({
      test: /\.woff2$/,
      type: "asset/resource"
    });
    return config;
  }
};

export default nextConfig;

package.json

"scripts": {
    "predev": "react-dsfr update-icons",
    "prebuild": "react-dsfr update-icons"
}

src/app/layout.tsx

import { getHtmlAttributes, DsfrHead } from "../dsfr-bootstrap/server-only-index";
import { DsfrProvider } from "../dsfr-bootstrap";

export default function RootLayout({ children }: { children: React.JSX.Element; }) {
  const lang = undefined; // Can be "fr" or "en" ...
  return (
    <html {...getHtmlAttributes({ lang })} >
      <head>
        <DsfrHead />
      </head>
      <body>
        <DsfrProvider lang={lang}>
          {children}
        </DsfrProvider>
      </body>
    </html>
  );
}

src/app/page.tsx

import { StartDsfrOnHydration } from "../dsfr-bootstrap";

export default function Page() {
  return (
    <>
      {/* Important: You must mount this component on every pages of your App! */}
      <StartDsfrOnHydration />
      <h1>Welcome!</h1>
    </>
  );
}

This documentation is for (aka the legacy next setup).

You are in this case if you have a pages/ directory at the root of your project.

# If you plan to use MUI:  
yarn add @mui/material @emotion/react @emotion/server @emotion/styled @mui/material @emotion/react

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  webpack: config => {
    config.module.rules.push({
      test: /\.woff2$/,
      type: "asset/resource"
    });
    return config;
  },
  //This option requires Next 13.1 or newer, if you can't update you can use this plugin instead: https://github.com/martpie/next-transpile-modules
  transpilePackages: [
      "@codegouvfr/react-dsfr", 
      "tss-react" // This is for MUI or if you use htts://tss-react.dev
  ],
  output: "export"
};

module.exports = nextConfig

package.json

"scripts": {
    "predev": "react-dsfr update-icons",
    "prebuild": "react-dsfr update-icons"
}

pages/_app.tsx

import type { AppProps } from "next/app";
import { createNextDsfrIntegrationApi } from "@codegouvfr/react-dsfr/next-pagesdir";
import Link from "next/link";

// Only in TypeScript projects
declare module "@codegouvfr/react-dsfr/next-pagesdir" {
    interface RegisterLink { 
        Link: typeof Link;
    }
}

const { 
    withDsfr,
    dsfrDocumentApi
} = createNextDsfrIntegrationApi({
    defaultColorScheme: "system",
    Link
});

export { dsfrDocumentApi };

function App({ Component, pageProps }: AppProps) {
    return <Component {...pageProps} />;
}

export default withDsfr(App);

pages/_document.tsx

import { Html, Head, Main, NextScript, DocumentProps } from "next/document";
import { dsfrDocumentApi } from "./_app";

const { 
  getColorSchemeHtmlAttributes, 
  augmentDocumentForDsfr 
} = dsfrDocumentApi;

export default function Document(props: DocumentProps) {
  return (
    <Html {...getColorSchemeHtmlAttributes(props)}>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

augmentDocumentForDsfr(Document);

The create-react-app project is no longer being maintained. If you are starting a new project you'll probably be beter off with Vite.

Add these three scripts to your package.json:

package.json

"scripts": {
    ...
    "postinstall": "react-dsfr copy-static-assets",
    "predev": "react-dsfr update-icons",
    "prebuild": "react-dsfr update-icons"
},
...
"jest": {
    "transformIgnorePatterns": [
      "node_modules/(?!@codegouvfr/react-dsfr)"
    ]
}

Trigger the execution of the postinstall script by running:

yarn # Or 'npm install' or 'pnpm install'

Add the following code in the <head />

public/index.html

<link rel="apple-touch-icon" href="%PUBLIC_URL%/dsfr/favicon/apple-touch-icon.png" />
<link rel="icon" href="%PUBLIC_URL%/dsfr/favicon/favicon.svg" type="image/svg+xml" />
<link rel="shortcut icon" href="%PUBLIC_URL%/dsfr/favicon/favicon.ico" type="image/x-icon" />
<link rel="manifest" href="%PUBLIC_URL%/dsfr/favicon/manifest.webmanifest" crossorigin="use-credentials" />

<link rel="stylesheet" href="%PUBLIC_URL%/dsfr/utility/icons/icons.min.css" />
<link rel="stylesheet" href="%PUBLIC_URL%/dsfr/dsfr.min.css" />

src/index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { startReactDsfr } from "@codegouvfr/react-dsfr/spa";
startReactDsfr({ defaultColorScheme: "system" });

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

You're all set! Next step for you is to setup de integration with your routing library (react-router for example)

Integration with routing libs

Your framework isn't supported? Let's ! Note: We don't have a custom integration for it but react-dsfr has been reported working with .

Avoiding or flash of unstyled text (FOUT)

You can avoid having a flash of unstyled text by preloading the font variant used on your homepage (look in the network tab of your browser dev tools what are the font downloaded initially).

Add the following tags in the <head />

index.html

<!--<link rel="preload" href="./node_modules/@codegouvfr/react-dsfr/dsfr/fonts/Marianne-Light.woff2" as="font" crossorigin="anonymous" />-->
<!--<link rel="preload" href="./node_modules/@codegouvfr/react-dsfr/dsfr/fonts/Marianne-Light_Italic.woff2" as="font" crossorigin="anonymous" />-->
<link rel="preload" href="./node_modules/@codegouvfr/react-dsfr/dsfr/fonts/Marianne-Regular.woff2" as="font" crossorigin="anonymous" />
<!--<link rel="preload" href="./node_modules/@codegouvfr/react-dsfr/dsfr/fonts/Marianne-Regular_Italic.woff2" as="font" crossorigin="anonymous" />-->
<link rel="preload" href="./node_modules/@codegouvfr/react-dsfr/dsfr/fonts/Marianne-Medium.woff2" as="font" crossorigin="anonymous" />
<!--<link rel="preload" href="./node_modules/@codegouvfr/react-dsfr/dsfr/fonts/Marianne-Medium_Italic.woff2" as="font" crossorigin="anonymous" />-->
<link rel="preload" href="./node_modules/@codegouvfr/react-dsfr/dsfr/fonts/Marianne-Bold.woff2" as="font" crossorigin="anonymous" />
<!--<link rel="preload" href="./node_modules/@codegouvfr/react-dsfr/dsfr/fonts/Marianne-Bold_Italic.woff2" as="font" crossorigin="anonymous" />-->
<!--<link rel="preload" href="./node_modules/@codegouvfr/react-dsfr/dsfr/fonts/Spectral-Regular.woff2" as="font" crossorigin="anonymous" />-->
<!--<link rel="preload" href="./node_modules/@codegouvfr/react-dsfr/dsfr/fonts/Spectral-ExtraBold.woff2" as="font" crossorigin="anonymous" />-->

src/app/layout.tsx

import { getHtmlAttributes, DsfrHead } from "../dsfr-bootstrap/server-only-index";
import { DsfrProvider } from "../dsfr-bootstrap";

export default function RootLayout({ children }: { children: React.JSX.Element; }) {
  const lang = undefined; // Can be "fr" or "en" ...
  return (
    <html {...getHtmlAttributes({ lang })} >
      <head>
        <DsfrHead 
          preloadFonts={[
	    //"Marianne-Light",
            //"Marianne-Light_Italic",
	    "Marianne-Regular",
	    //"Marianne-Regular_Italic",
	    "Marianne-Medium",
	    //"Marianne-Medium_Italic",
	    "Marianne-Bold"
	    //"Marianne-Bold_Italic",
	    //"Spectral-Regular",
	    //"Spectral-ExtraBold"
	  ]}
        />
      </head>
      <body>
        <DsfrProvider lang={lang}>
          {children}
        </DsfrProvider>
      </body>
    </html>
  );
}

pages/_app.tsx

import type { AppProps } from "next/app";
import { createNextDsfrIntegrationApi } from "@codegouvfr/react-dsfr/next-pagesdir";
import Link from "next/link";

// Only in TypeScript projects
declare module "@codegouvfr/react-dsfr/next-pagesdir" {
    interface RegisterLink { 
        Link: typeof Link;
    }
}

const { 
    withDsfr,
    dsfrDocumentApi
} = createNextDsfrIntegrationApi({
    defaultColorScheme: "system",
    Link,
    preloadFonts: [
  	//"Marianne-Light",
        //"Marianne-Light_Italic",
	"Marianne-Regular",
	//"Marianne-Regular_Italic",
	"Marianne-Medium",
	//"Marianne-Medium_Italic",
	"Marianne-Bold",
	//"Marianne-Bold_Italic",
	//"Spectral-Regular",
	//"Spectral-ExtraBold"
    ]
});

export { dsfrDocumentApi };

function App({ Component, pageProps }: AppProps) {
    return <Component {...pageProps} />;
}

export default withDsfr(App);

Add the following code in the <head />

public/index.html

<%
[
  //"Marianne-Light",
  //"Marianne-Light_Italic",
  "Marianne-Regular",
  //"Marianne-Regular_Italic",
  "Marianne-Medium",
  //"Marianne-Medium_Italic",
  "Marianne-Bold",
  //"Marianne-Bold_Italic",
  //"Spectral-Regular",
  //"Spectral-ExtraBold"
].forEach(function(name){ %>
  <link rel="preload" href="%PUBLIC_URL%/dsfr/fonts/<%=name%>.woff2" as="font" crossorigin="anonymous" />
<% }); %>

CSS in JS

Compatibility with solutions like styled-components, emotion and TSS.

At build time react-dsfr parses the official files and spits out a typed JavaScript representation of the DSFR. In particular, its and , the and the .

This enables to write DSFR compliant CSS in JS code, since we are able to expose function that are the equivalent of the DSFR utility classes.

Checkout .

You can use the style props on native react components but you won't be able to use the fr.breakpoint utility that enable to write responsive code.

tss-react

You can also use TSS to apply global styles:

Advantages of tss-react over other CSS in JS solutions

I'm the author of TSS, it gets premium integration and support.

Optionally, if you want to have access to isDark in your styles, but this is not nessesary because fr.colors uses CSS variables by default.

spacing

For ensuring the spacing between elements is consistent throughout the website.

This tool is build using that is automatically generated from

import { fr } from "@codegouvfr/react-dsfr";

function MyComponent() {

    return (
        <div 
            style={{ 
                marginTop: fr.spacing("2v"),
                ...fr.spacing("padding", { topBottom: "5w", left: 5 })
            }}
        />
    );

}

The above code is equivalent to:

import { fr } from "@codegouvfr/react-dsfr";

function MyComponent() {

    return (
        <div 
            style={{ 
                marginTop: fr.spacing("2v"),
                paddingTop: fr.spacing("5w"),
                paddingBottom: fr.spacing("5w"),
                paddingLeft: 5
            }}
        />
    );

}

Which is in turn equivalent to:

import { fr } from "@codegouvfr/react-dsfr";

function MyComponent() {

    return (
        <div 
            style={{ 
                marginTop: "0.5rem",
                paddingTop: "2.5rem",
                paddingBottom: "2.5rem",
                paddingLeft: 5
            }}
        />
    );

}

breakpoints

For writing responsive UIs with media query (@media).

This tool is build using that is automatically generated from

import { useStyles } from "tss-react";
import { fr } from "@codegouvfr/react-dsfr";

function MyComponent() {

    const { css, theme } = useStyles();
    
    return (
        <div
            className={css({
                width: "100px",
                height: "100px"
                backgroundColor: theme.decisions.background.flat.info.default,
                // On screen larger than MD the background color 
                // will be colors.decisions.background.alt.blueFrance.default.
                [fr.breakpoints.up("md")]: {
                    backgroundColor: theme.decisions.background.alt.blueFrance.default
                },
                maxWidth: fr.breakpoints.values.xl
            })}
        />
    );

}

colors

Using the theme object that holds the colors decisions and options.

📣📣📣📣📣📣 There is at your disposal to help you pick your colors. Use it! It's great! 📣📣📣📣📣📣📣

Using CSS variables (recommended)

This approad is React agnostic and yield the best performances.

import { fr } from "@codegouvfr/react-dsfr";

function MyComponent(){

  return (
    <div style={{
      // The recommended method, using CSS variables: 
      backgroundColor: fr.colors.decisions.background.default.grey.default 
      // This is: backgroundColor: "var(--background-default-grey)"
    }} />
  );

}

Using HEX color code

Some third party libraries might require you to provide explicit value as colors.

When CSS variable references doesn't work you can do:

import { fr } from "@codegouvfr/react-dsfr";
import { useIsDark } from "@codegouvfr/react-dsfr/useIsDark";

function MyComponent(){

  const { isDark } = useIsDark();

  return (
    <div style={{
      backgroundColor: fr.colors.getHex({ isDark }).decisionsbackground.default.grey.default
      // This is backgroundColor: "#161616" when isDark is true
      // and     backgroundColor: "#ffffff" when isDark is false
    }} />
  );

}

useIsDark()

You can access the active mode (isDark: true/false) in the theme object. However, if you want to manually switch the mode, you can use setIsDark(true/false) .

Consider using the component instead of trying to manually manage the active mode.

import { 
   useIsDark, 
   getIsDark // Let you access the current value of isDark outside of React (client side only)
} from "@codegouvfr/react-dsfr/useIsDark";

function MyComponent(){

    const { isDark, setIsDark } = useIsDark();
    
    //isDark is a boolean that is true if the App is currently in dark mode.

    //Calling setIsDark(true) will switch the app in dark mode.
    //calling setIsDark("system") will set to whatever mode is signaled as prefered
    //by the user browser


}

If you want to use the isDark value in your styles:

import { tss } from "tss-react";
import { useIsDark } from "@codegouvfr/react-dsfr/useIsDark";

function MyComponent(props){

    const { className } = props;
    
    const { isDark } = useIsDark();
    const { classes, cx } = useStyles({ isDark });
    
    return (
        <div classNames={cx(classes.root, className)}>
           // ...
        </div>
    );
    
}

const useStyles = tss
  .withParams<{ isDark: boolean; }>()
  .create(({ isDark })=> ({
    root: { /* ... */ }
  }));

useBreakpointsValuesPx()

It returns the values in pixel of the different breakpoint ("xs", "md", "lg", "xl") based on the current root font size.

It can be used to do stuffs like this, geting the number of column of a responsive layout in JavaScript:

import { useBreakpointsValuesPx } from "@codegouvfr/react-dsfr/useBreakpointsValuesPx";
import { useWindowInnerSize } from "@codegouvfr/react-dsfr/tools/useWindowInnerSize";

function useColumnCount(){

        const { breakpointsValues } = useBreakpointsValuesPx();

        const { windowInnerWidth } = useWindowInnerSize();

        const columnCount = (() => {
            if (windowInnerWidth < breakpointsValues.md) {
                return 1;
            }

            if (windowInnerWidth < breakpointsValues.xl) {
                return 2;
            }

            return 3;
        })();
        
        return collumnCount;

}

Be carefull though, favor using fr.breakpoints over client size mesurement and computation.

On the backend you can't know ahead of time the size of the screen of your users so this kind of approach will result in a flickering in SSR setups.

Long story short, use this only if you are building an SPA.

v1

Initial setup

Avoiding or flash of unstyled text (FOUT)

Integration with routing libs

Class names type safety

Colors

Components

Customization

The classes property

Creating a custom component

Icons

CSS in JS

spacing

breakpoints

colors

Using CSS variables (recommended)

Using HEX color code

useIsDark()

useBreakpointsValuesPx()

Internationalization

Adding translations or overwriting default text

With Next App Router

Importing assets

MUI integration

Next.js: Improving first print

Setting up Next.js + MUI + react-dsfr

Storybook

Minimal setup

Bells and whistles

Analytics

Content-Security-Policy

Nonce

Trusted Types Policy

Custom policy name

Publishing a NPM modules that depends on react-dsfr

Contributing

Integration with routing libs

Class names type safety

Components

Customization

The classes property

Creating a custom component

Colors

Icons

Internationalization

Adding translations or overwriting default text

With Next App Router

Content-Security-Policy

Nonce

Trusted Types Policy

Custom policy name

Analytics

Contributing

Publishing a NPM modules that depends on react-dsfr

Initial setup

Avoiding or flash of unstyled text (FOUT)

CSS in JS

spacing

breakpoints

colors

Using CSS variables (recommended)

Using HEX color code

useIsDark()

useBreakpointsValuesPx()

Storybook

Minimal setup

Bells and whistles

Importing assets

MUI integration

Next.js: Improving first print

Setting up Next.js + MUI + react-dsfr

The `classes` property

The `classes` property