An implementation of the GOV.UK Design System in React using CSSinJS
An implementation of the GOV.UK Design System in React using CSSinJS using Object notation (with styled-components).
We aim to track the following projects (in priority order) as to which components to implement and how they should look/behave. Where possible we are using the existing CSS as a guide. When we need to modify to suit custom markup, we aim to provide a comment in our code as to why this was done.
This project is being or has been used by:
The project is currently maintained for free by a small number of volunteers. If you would like to contribute, help maintain or sponsor this project, please get in touch via Discussions or Twitter.
npm install govuk-react styled-components @types/styled-components --save
import { Button } from 'govuk-react'
const MyComponent = ({title}) => (<div>
<h1>{title}</h1>
<Button />
</div>)
See the Storybook for examples of all available components.
Also see the Example Application for basic usage.
We provide a Link component which creates an element styled as a GDS link. As we are using styled-components it is possible to apply that style to an existing component using the as
prop. Other props will be passed through.
For example;
import { BrowserRouter, Link as RouterLink } from 'react-router';
import { Link } from '@govuk-react/link';
const MyComponent = () => (
<nav>
<BrowserRouter>
<Link as={RouterLink} to="https://example.com">example</Link>
</BrowserRouter>
</nav>
);
Use of these components assumes the following from the peer project:
GlobalStyle
component is included on all pages.See A Unified Styling Language.
This project is part of a larger initiative to componetise large scale React applications. Using CSSinJS allows us to include styles inside a module bundle that can be published (using npm publish
) and consumed by a peer application, without putting dependencies on the peer application to implement a specific CSS build system.
import styles.css
, particularly if you want universal support) or including certain CSS files. We want a simple npm install govuk-react
to be enough to get govuk styled components on to your page, irrespective of your build system.Components are published to npm independently. This means users have the ability to upgrade govuk-react and still use older components.
This is particularly relevant in a large application where:
e.g. for DateField, you import it separately as follows:
import { H1, Paragraph } from 'govuk-react';
import DateField from '@govuk-react/date-field';
Then in your package.json, you can update govuk-react, but specify the older version of '@govuk-react/date-field'.
Unfortunately the GDS transport font has a relatively restrictive license described on the gov.uk blog. We are investigating rendering an elegant alternative before falling back to Arial on issue 272.
We use Chromaticqa for visual regression testing and it is awesome, you should too!
Want to contribute? Checkout our Contributing page.