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.
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.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.
The NSW Design System styles can be imported as a whole package, or you can install core styles and add components selectively.
To import all styles as a single package you need to add following snippet at the start of your main SCSS file:
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:
The tools barrel gives you access to shared mixins and functions via a single, stable import path. It does not output CSS and it does not replace importing the core styles or any components you use. Keep importing settings, base, helpers and your chosen components as shown above; the tools barrel is purely Sass utilities for use inside your component styles.
Performance note: Importing the tools barrel does not add unused CSS. Mixins and functions only generate CSS when you call them, and the module is parsed once per build.
Tip: Prefer the barrel for consistency. If a file needs exactly one tool and you want explicit coupling, you can import that file directly (for example, @use 'node_modules/nsw-design-system/src/global/scss/base/mixins' as mixins;).
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:
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.
You can add the files to your main html document
You can download the compiled design system assets (HTML, CSS, JavaScript) in the HTMLStarterkit zip file from the latest release.
NSW Design System is supported in the following browsers:
To be notified when there’s a new release, you can either join the Design System community or watch the NSW Design System Github