Cookies on ons.gov.uk

Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.

We would like to set additional cookies to remember your settings and understand how you use the site. This helps us to improve our services.

View cookies

You have accepted all additional cookies. You have rejected all additional cookies. You can change your cookie preferences at any time.

Skip to main content

Installing the design system Install with npm

The ONS Design System is available as an npm package (opens in a new tab)  . Every release is published to npm and provides a quick way to install everything you need. Inside the package are the following:

  • components – each component contains a macro file that can be used in a Nunjucks-compatible application
  • Sass files – all Sass rules are available to import, either everything or specific parts like a single component or the Sass that controls layout
  • CSS files – compiled CSS of all components and layout styles
  • JS files – bundled JavaScript modules
  • fonts, images, favicons – static assets used in components and templates
  • base page template – a Nunjucks template that contains the core markup and components needed to create an ONS service

To install the ONS Design System npm package you will need to install node.js (opens in a new tab)  and you will need a package.json (opens in a new tab)  file in the root of your project.

Then run:

npm install @ons/design-system

This will install the latest version of @ons/design-system in your node_modules folder.

The next step is to get some styles, scripts and other assets working in your project.

Help improve this page

Let us know how we could improve this page, or share your user research findings. Discuss this page on GitHub (opens in a new tab)