Logo

react-dsfr
Version
v1.22.2
Categories
Short description
French State Design System React integration
Source catalogue
437
22
4
68
Vitality
93%
Quick links
Landing URL
Documentation
Description
This module is a wrapper/compatibility layer for
@gouvfr/dsfr, the vanilla JS/CSS
implementation of the DSFR.
For TypeScript and JavaScript projects.
- Fully TypeSafe, well documented API.
-
Always in up to date with latest the DSFR evolutions. Code and Types
generated from
@gouvfr/dsfr
/dist/dsfr.css
. -
Exactly the same look and feel than with
@gouvfr/dsfr. -
No white flash when reloading in SSR
setup. -
Most components are server component ready. The others are labeled with
"use client";
-
Perfect integration with all major React framework: Next.js (PagesDir
and AppDir), Create React App, Vue. -
All the
components
are implemented (14/42, see
details) -
Three shakable distribution, cherry pick the components you import.
(It's not all in a big .js bundle) -
Optional integration with MUI. If you use MUI
components they will be automatically adapted to look like DSFR
components.
See documentation. -
Enable CSS in JS by providing a
useTheme()
hooks that exposes the
correct colors options and decision for the currently enabled color
scheme. -
Opt-in i18n, built in text can be displayed in multiple languages and
user can provide extra translations. -
Support routing libraries
like react-router.
This module is a product of Etalab's Free and open source software
pole. I'm working full time
on this project. You can expect rapid development.
Intended audience
Detailed information
Release date
Supported languages
French,
English
Development status
Beta
Maintenance type
[community] Maintained by people donating their time to the project
Software type
library