Gov Design System - React wrapper

This package contains a wrapper that is specific to React and is designed for use with Gov Design System CE Components.

Usage

For full usage instructions, please see the documentation.

Install

npm install @gov-design-system-ce/react@latest @gov-design-system-ce/styles@latest

Import styles

Unlike the Vue and Angular wrappers, the React wrapper is not a Web Component proxy — it renders light-DOM markup with .gov-* classes. It therefore needs the full stylesheets, including component styles:

@import "@gov-design-system-ce/styles/tokens.css";
@import "@gov-design-system-ce/styles/styles.css";
@import "@gov-design-system-ce/styles/layout.css";
@import "@gov-design-system-ce/styles/content.css";
@import "@gov-design-system-ce/styles/components.css";
@import "@gov-design-system-ce/styles/animations.css";

Since 4.7.0 the stylesheets live at the package root — the former html/* paths were removed.

Icons and fonts are loaded from /assets/icons and /assets/fonts — see the for developers page for asset setup.

Use a component

Every component is imported by name:

import { GovButton } from "@gov-design-system-ce/react";

export function Example() {
  return (
    <GovButton color="primary" type="solid">
      Click me
    </GovButton>
  );
}

Architecture

Unlike core-vue / core-angular, whose proxy files are generated from the Stencil core (vueOutputTarget / angularOutputTarget), core-react is a hand-written React reimplementation of the components. The build target compiles src/ with tsc into ES Modules plus type declarations under dist/.

Copyright

Copyright(c) 2020 - 2026 Digitální a informační agentura