Get started

To make your service consistent with GOV.UK, you should start by checking what exists in the GOV.UK Design System.

If something is not in the GOV.UK Design System, you should check what exists in the:

Reuse as much as possible and iterate based on user needs.

Using the component library

The frontend components detailed in the library are available as a Node.js package. Installing this package is the recommended way to use these components in your service. You can then copy the Nunjucks code for a component and include it in your views.

GOV UK Prototype Kit

The Node.js package is fully compatible with the GOV UK Prototype Kit and does not require any additional steps to use.

Node.js express

There are a few additional steps when installing the Node.js package into HMPPS UI applications based on the template:

  1. Add '/node_modules/hmpps-court-cases-release-dates-design/hmpps/assets' and '/node_modules/hmpps-court-cases-release-dates-design' to the static resources configuration in setUpStaticResources.ts
  2. Add 'node_modules/hmpps-court-cases-release-dates-design/' and 'node_modules/hmpps-court-cases-release-dates-design/hmpps/components/' to nunjucks.configure in nunjucksSetup.ts
  3. Add any Nunjucks filters required for the component to nunjucksSetup.ts e.g. njkEnv.addFilter('personProfileName', personProfileName)

Contributing to the component library

The code repository for the frontend kit guides you through the steps to improve existing components and add new ones.