Install DWP Frontend

You can copy HTML from the code samples on this site, but we recommend installing DWP Frontend instead and using Nunjucks to add components to your project. This makes it easier to maintain your code and keep components up to date.

These instructions assume you are using the GOV.UK Prototype Kit.

Install dwp-frontend using npm

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 'Events' and has three events.

{% from "timeline/macro.njk" import dwpTimeline %}

<h1 class="govuk-heading-l">Events</h1>

{{
    dwpTimeline({ 
        items: [
            {
                title:  "Completed ‘DP224JP’ form received",
                byline:  "System",
                date:  "16 June 2024 at 1:00am"
            },
          
            {
                title:  "Summary of report",
                byline:  "John Goldsmith",
                date:  "1 June 2024 at 7:14am"
            },
            {
                title:  "Workplace assessment report",
                byline:  "John Goldsmith",
                link: {
                    href: "#",
                    text: "View details",
                    visuallyHiddenText: "of the event on 15 May 2024 at 4:01pm"
                },
                date:  "15 May 2024 at 4:01pm"
            }
    ]
    })
}}

For more help setting up or using DWP Frontend, email the design system team or use the #design-system Slack channel.

Could we improve this page?

Send questions, comments or suggestions to the DWP Design System team.

Work in progress

This page is a design preview. It may not contain the latest guidance and may not behave as expected.

Current guidance can always be found at design-system.dwp.gov.uk.

Install DWP Frontend