[COMPATIBILITY] Shadcn / TailwindCSS

[tygourm]

Hello,

As much as I'd like to use react-dsfr components in my apps for a ministry, I can’t, because I need to deliver feature-rich AI interfaces as quickly as possible, using the latest versions of React, TypeScript, etc. Unfortunately, I’m running into incompatibilities between your library and my dependencies.

React / Shadcn / TailwindCSS has been my go-to stack for frontends. I don’t strictly need to use react-dsfr in my apps, as they won’t be delivered at large scale, either inside or outside the ministry, and they already follow high quality / accessibility standards.

Still, I’d love to add a 🇫🇷 touch to my apps! I haven’t been able to find any Shadcn / TailwindCSS compatible implementations of DSFR, and I’m not skilled enough to build one myself, even following the official guide. Is this on your roadmap, or do you know someone who could help me, or a place where I could find such assets?

Thanks,

[garronej]

Hello @tygourm,

What you’re asking for is unfortunately not possible.
And not for technical reasons. It is explicitly blocked by the SIG (Système d’Information du Gouvernement).

The DSFR is not just a design specification. It is a reference implementation of a design system, with its own grid, layout rules, and standardized utility classes, etc.
You can think of the DSFR like Bootstrap: you don’t make Bootstrap work with ShadCN or Tailwind. Bootstrap is Bootstrap. You either use it as-is or you don’t.

Any “look-alike” implementation of the DSFR using another styling system is explicitly forbidden by the government, and stopping such attempts is a top priority.
The reason is to fight against the “grey area” of websites that look official but aren’t quite. The goal is for citizens to clearly identify official websites.
For that, every gouv.fr site must use the reference DSFR implementation so that all sites share the exact same look and feel.
The underlying idea is simple: “If it looks a bit off, it’s probably a scam, I should be cautious.”

Another important point: even if this is not always strictly enforced in practice, in theory only gouv.fr domains are allowed to use the DSFR. And every citizen-facing gouv.fr site must use the DSFR. Not a DSFR look-alike.

My advice:

• If this is an internal tool, do not try to copy the DSFR. Use your usual tooling.
  If you want a distinct visual identity, brand it around your ministry’s identity, not the government’s branding. You’ll avoid problems.
• If the site is a gouv.fr, then using the DSFR is not optional. You will have to give up your usual styling stack.

In that case, we do provide a reference starter that includes ML chatbot interface examples:
https://vite-insee-starter.demo-domain.ovh/

The good news is that Codex and Claude are now very capable of working with react-dsfr when given a clear frame of reference. This starter was largely vibe-coded.

Best,

[tygourm]

Hello @garronej,

Thanks a lot for the kind, quick and detailed answer.

I will follow your advice, stick to my stack and try to build a distinct visual identity.

Best,