Home Office plugin for GOV.UK prototypeHome Office React prototypeCommunity resources

PrototypingAdd Home Office plugin to GOV.UK prototype

Create a GOV.UK prototype. This is the prototyping infrastructure.

In your terminal, in the folder with your prototype, run:
npm install home-office-kit.

This allows you to use Home Office design system components and change to the Home Office styling.

If you run your prototype, and go to 'Manage your prototype' (/manage-prototype/templates), you'll find Home Office templates.

You can use the GOV.UK tutorials and guides to help build your prototype.

Header, footer and page background

To change your prototype to by default use the Home Office styling:

  1. In app/views/layouts/main.html change:
    {% extends "govuk-prototype-kit/layouts/govuk-branded.njk" %} to
    {% extends "home-office-kit-layout.html" %}

Font

To change your prototype to use Roboto:

  1. In app/assets/sass create settings.scss, and add one line:
    @import "node_modules/home-office-kit/sass/settings"

Help us improve prototyping guidance

This needs improving. We need evidence about:

  • your experience using this plugin
  • suggested improvements or features
  • bugs you've found

To contribute, add your ideas to our GitHub discussion, or follow our contribute guidance.