An implementation of the GOV.UK Design System in React that provides support for writing internal applications in addition to public ones. See: About NotGovUK

The components are written in Typescript and documented in Storybook's MDX format.

Warning: This is a work in progress and should only be used in production by brave souls.

(See our documentation site and our Storybook.)

In order to consume these components you will require a system that utilised a bundler (such as Webpack) that can process imported assets such as images, fonts and Sass files. Create React App may be able to do this but does not provide Server-Side Rendering (SSR). You will also need to ensure that you provide an instance of react-router.

As such, we suggest that you use our specially designed tech stack for this purpose. See: Getting started.

See: Working on and contributing to NotGovUK

The is a monorepo and so it contains multiple packages. The packages are broken down into libraries, components and applications.

• apps/ Applications
• lib/ Libraries
• components/ Components (Special libraries that include assets, such as Sass code and images, and are intended to be consumed via Webpack. The structure of these is explained below.)
• coverage/ A code coverage report that can be created by running make test.
• storybook-static/ A static version of the storybook that can be created by running make docs.

1. src/Component.ts[x] The implementation of the component. It may reference other .tsx files in order to separate business logic from presentation logic. Otherwise, it will typically be very simple and contain mostly HTML code.
2. assets/Component.scss The SCSS (CSS) code that pertains to the component.
3. spec/Component.spec.ts The tests for this component.
4. spec/Component.stories.mdx The main documentation of the component. This is what people will use to understand how to consume the component.
5. README.md Very simple documentation to aid people browsing the code via GitHub. Typically this will just link to the GOV.UK Design System and include a screenshot of the component.

Pull requests are welcome but it is probably best to open an issue first to discuss what you think needs to change.

I would like this project to be as easy as possible to both consume and contribute to. To that end, if you think any of the documentation isn't clear please do let me know by raising an issue or a pull request.

Finally, this work is still at quite an early stage. If you run into any problems or have any questions, please do get in touch.

-- Daniel Martin, December 2019 (updated August 2020).