Skip to content

codegouvfr/react-dsfr

Folders and files

NameName
Last commit message
Last commit date

Latest commit

b56c8ae Β· Mar 13, 2025
Feb 17, 2024
Oct 7, 2024
Feb 5, 2025
Feb 5, 2025
Mar 13, 2025
Mar 5, 2025
Jan 24, 2025
Jul 13, 2023
Apr 21, 2023
Dec 26, 2022
Dec 26, 2022
Jul 13, 2023
Sep 20, 2022
Jan 23, 2024
Sep 20, 2022
Feb 20, 2025
Feb 20, 2025
Mar 5, 2025
Sep 8, 2024
Nov 18, 2022
Nov 4, 2022
Feb 5, 2025

Repository files navigation

πŸ‡«πŸ‡· French State Design System React toolkit πŸ‡«πŸ‡·

Components documentation - Guides - Playground

πŸ‘‰ Version franΓ§aise du README ici.

WARNING: This Design System is only meant to be used for official French's public service websites.
Its main purpose is to make it easy to identify governmental websites for citizens. See terms.

This module is an advanced toolkit that leverages @gouvfr/dsfr, the vanilla JS/CSS implementation of the DSFR.

image

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).

πŸ’‘ Need ready to use, DSFR compliant login and register pages? Checkout keycloak-theme-dsfr.

πŸš€ Get started πŸš€

Governance

This module is a product of Etalab's Free and open source software pole.

This project is co-maintained by public servants from various French administrations:

Development

git clone https://github.com/codegouvfr/react-dsfr
cd react-dsfr
yarn

# Starting storybook
yarn storybook

# Starting test apps
yarn start-cra  # For testing in a Create React App setup
yarn start-vite # For testing in a Vite setup
yarn start-next-pagesdir # For testing in a Next.js 13 PagesDir setup (the default setup)
yarn start-next-appdir # For testing in a Next.js 13 AppDir setup

# Run all unit test (test/runtime):
yarn test
# Run only test/runtime/cssVariable.test.ts (for example)
npx vitest -t "Resolution of CSS variables"

Want to contribute?

Thank you! See the contribution guide.

How to publish a new version on NPM, how to release a beta version

This repo was bootstrapped form garronej/ts-ci have a look at the documentation of this starter for understanding the lifecycle of this repo.

Use-cases

A few projects that use @codegouvfr/react-dsfr.