A NSW Government website
Design System v3.0.5

Getting Started

Using the design system

How you use the NSW Design System depends on your team's capabilities. We recommend using npm but also provided in a CDN, and a downloadable starter kit which includes all the compiled assets.

Installing with NPM

  • Install Node/npm. You can find more information how to install it Nodejs.
  • Generate a package.json file using the npm init command in the terminal. You will be prompted to enter several pieces of information, like the name of your application, version, description etc.
  • Add nsw-design-system to your project’s package.json:

    npm install --save nsw-design-system

The NSW Design System is now installed as a dependancy of your project. Next, import styles and javascript in to your project build.

Importing styles

The NSW Design System styles can be imported as a whole package, or you can install core styles and add components selectively.

All styles

To import all styles as a single package you need to add following snippet at the start of your main SCSS file:

Core and selected components

Our core library includes the design system's base theme, typography, mixins and helper functions. Once you imported it, you can take full advantage of our variables and helpers. To import core library you need to add following snippet at the start of your main SASS file:

Once you have installed the core library you can start importing components as you need it. To import individual components you need to add following snippets to your main SASS file under core libraries import:

Adding the fonts and the icons

In your main html document add this line of code inside the head tag. Make sure that it's placed before the NSW Design System styles import. Or install icon and font from npm.

Another way is to import it in css:

Importing javascript into your project

Some NSW Design System components require javascript to provide advanced functionality. To ensure the page is ready for javascript to run, include the follow scripts tags at the end of the html document.

Depending on your project set up, you might wish to copy the file into your project from node_modules or add the reference to your build workflow.

Using JSDelivr CDN

You can add the files to your main html document

Download starter kit

You can download the compiled design system assets (HTML, CSS, JavaScript) in the HTMLStarterkit zip file from the latest release.

Browser support

NSW Design System is supported in the following browsers:

  • Chrome (latest)
  • Safari (latest)
  • Microsoft Edge (latest)
  • Firefox (latest)

Getting updates

To be notified when there’s a new release, you can either join the Design System community or watch the NSW Design System Github