A version of the design system implemented as React components is currently under development.
These are idiomatic components suitable for modern React applications, for example developed with Next.js or Vite.
The React components are current in alpha so will undergo multiple breaking changes until they reach version 1.0.
Please check the current status of each React component for latest updates.
If you are interested in the use of React components that implement the design system, please contact the design system team.
This library should only be imported for departments actively working with the core design system team during its development. Do not use this library if you are not part of this development process, and contact the design system team instead if you interested in its use.
Welcome to the GOV IE React component library, a collection of reusable React components designed to help you build modern React web applications utilising the GOV IE design system.
Status: Alpha
Important Note: This library is currently in the alpha stage. As we continue to develop and improve the components, frequent breaking changes are to be expected. We appreciate your understanding and patience as we work towards a stable version 1.0.
To install the library, use the following command:
npm install @govie-ds/react @govie-ds/theme-govie
We strongly recommend that you pin the GOV IE design system packages, so that any regressions are not automatically introduced during development. Regressions that will only be discoverable at runtime.
Upgrades should be explicit version updates in the package.json
and then your application should be regression tested:
"dependencies": { "@govie-ds/theme-govie": "0.5.0", "@govie-ds/react": "0.20.0"
Import the GOV IE theme.css
from the @govie-ds/theme-govie
theme package at the entry point of your application, for example:
import "@govie-ds/react/styles.css";
import "@govie-ds/theme-govie/theme.css";
export function App() {
return (
...
);
}
Note that you should typically run some form of CSS reset or normalisation of styles as part of your application entry point, depending on your application styling solution. For example Tailwind includes preflight, an opinionated set of base styles.
Use components within your application from the @govie-ds/react
component package:
import { Header } from '@govie-ds/react';
export function MyComponent() {
return (
<>
<Header serviceName="My Service" />
</>
);
}
The @govie-ds/react
package contains Heading
and Paragraph
components that implement the GOV IE design system responsive text guidelines:
import { Heading, Paragraph } from '@govie-ds/react';
function MyComponent() {
return (
<>
<Heading>Heading</Heading>
<Paragraph>This is a paragraph</Paragraph>
</>
);
}
We welcome contributions! If you have suggestions for improvements, please feel free to open an issue or submit a pull request.
Your feedback is invaluable to us. Please share your thoughts and experiences to help us make this library better.