Nextra DSFR Docs Template is a documentation website starter built on Nextra and the react-dsfr implementation of the French government's DSFR design system, giving Markdown/MDX documentation sites a state-branded, accessible visual identity.
What is the Nextra DSFR Docs Template?
Nextra DSFR Docs Template is a documentation site template that pairs the Nextra static-site generator with the DSFR theme from react-dsfr. It runs on Next.js, turns Markdown/MDX content into a static documentation site, and is maintained under the MIT License by garronej. A live demo is deployed at nextra.react-dsfr.fr, and the source repository is available on GitHub.
Key Features
- Nextra-powered — Content is written in Markdown or MDX and rendered by Nextra, the React-based static site generator for documentation.
- DSFR design system — Uses the DSFR theme from the codegouvfr/react-dsfr project, applying French government styles for typography, buttons, navigation, and layout.
- Custom Nextra theme — Ships with
nextra-theme-dsfr, a custom theme that replaces the defaultnextra-theme-docs. - Live demo — A deployed preview is available at nextra.react-dsfr.fr so you can evaluate the rendered result before setting up locally.
- Yarn-based setup — Local development requires only
git clone,yarn, andyarn dev; the README documents these commands for a quick start. - Theme experimentation — Includes a detailed procedure to swap in the default
nextra-theme-docsand link its builtdistfolder for live reload, which is useful for understanding how Nextra themes work. - MIT licensed — The entire project can be reused and modified freely for both public and private documentation projects.
Who is it for?
- French government and public-sector developers — who need documentation sites that comply with the DSFR (Système de Design de l'État) guidelines for accessibility and design.
- Nextra theme authors — who want to learn how to create or customize Nextra themes by following the README's experimentation instructions.
- Documentation maintainers — who want a Markdown/MDX documentation site with the French state's visual identity already integrated and a live demo to evaluate.
What can you do with it?
- Government project teams: Publish product, API, or internal documentation that follows the official DSFR design system without building the UI from scratch.
- Nextra learners: Switch the theme to the default
nextra-theme-docsand modify its source locally to see how theme components are loaded and rendered. - Design-system evaluators: Inspect the live demo at nextra.react-dsfr.fr to see how react-dsfr components behave inside a real documentation layout.
How do you run it locally?
Clone the repository, install dependencies with yarn, and run yarn dev to start the development server. For experimenting with the default theme, edit next.config.js to use nextra-theme-docs, install that package, and link its source output into node_modules as the README describes.
License
This template is licensed under the MIT License, so you are free to use, modify, and distribute it in your own projects.
FAQ
Is the Nextra DSFR Docs Template free?
Yes. The project is released under the MIT License, which permits free use, modification, and redistribution for personal or commercial documentation projects.
What is the DSFR?
DSFR stands for Système de Design de l'État Français, the French government's official design system. It sets standards for accessibility, components, and visual style, and the template implements it through the react-dsfr library.
How do I start a new documentation site from this template?
Clone the repository, run yarn to install dependencies, then run yarn dev to start the development server. The README provides these commands under "Local Development".
Can I use the default Nextra theme instead of the DSFR theme?
Yes. The README explains how to change next.config.js so the site uses nextra-theme-docs rather than nextra-theme-dsfr. It also details how to experiment with the default theme's source code for live reload.
Does the template support MDX files?
As a Nextra-based project, it supports both Markdown and MDX content, allowing you to embed React components directly in your documentation pages.
