Get started: install using npm
If you expect to use more than one or two components, or if you are setting up a new project, we recommend installing DWP Frontend. You can then use Nunjucks to add components to your prototype.
Install DWP Frontend
These instructions assume you are using the GOV.UK Prototype Kit.
Start Terminal and navigate to your prototype’s root folder, for example:
cd projects/my-new-project
Run
npm i @dwp/dwp-frontend
Add components to your prototype
With DWP Frontend installed you can use the Nunjucks code from any component to add that component to your prototype.
For instance, the following code imports the Timeline component and then adds a timeline to a page. This particular timeline is called “Appointments” and has one event.
{% from "timeline/macro.njk" import dwpTimeline %}
{{ dwpTimeline({
title: "Appointments",
events: [
{
name: "John Smith",
state: "Accepted",
date: "11 Aug 2021"
}
]
}) }}
For more help setting up or using DWP Frontend, email the design system team or use the #design-system Slack channel.
Get in touch
If you’ve got a question, idea or suggestion email the Design System team on dwp-design-system@engineering.digital.dwp.gov.uk