1.2.30 • Public • Published


    Your source for quickly creating consistent on-brand NICE digital services.

    npm GitHub release License Dependencies Dev dependencies lerna

    Table of contents

    Required software

    Install Node >= 6.9.0 and npm >= 5. Choose LTS from the Node download page.


    Install the NICE Design System npm package into your project by running the following on the command line:

    npm i @nice-digital/design-system --save

    Then follow the usage steps below:


    This package is the 'kitchen sink' package which gives you access to all styles, components and icons. It references @nice-digital/nds-core, @nice-digital/icons and all the component packages.

    The installed package contains:

    • source SCSS
    • pre-compiled (dist) CSS and JavaScript
    • static assets like favicon and logo.

    Note: Install and reference components directly if you don't need the full kitchen sink, for example tabs.


    Import the NICE Design System into your application:

    @import "~@nice-digital/design-system/scss/nice-design-system";

    This gives you everything: core (mixins, functions, variables, placeholders), CSS resets, icon font, default styles and all components. Visit the documentation site for full details on what's available in the SCSS.

    Problems with tilde (~) imports?

    We use tildes in SCSS import paths, which works out of the box with sass-loader in webpack. Use node-sass-tilde-importer if you're using node-sass directly, or grunt-sass-tilde-importer.

    If you want the design system without all of the components you can install the base styling:

    @import "~@nice-digital/design-system/scss/base";

    You can then start using the SCSS from the NICE Design System, for example:

    .something {
    	color: $colour-nice-teal;
    	margin: rem($spacing-large);

    If you want to import the design system into a CSS module you can scope the import globally:

    :global {
    	@import "~@nice-digital/design-system/scss/nice-design-system.scss";


    The @nice-digital/design-system npm package includes a dist folder with pre-compiled assets (CSS and JS). These are useful for quick prototypes, but aren't recommended for production because:

    • it uses compiled CSS so you lose the benefit of all the SCSS mixins, function and variables
    • you get everything: you can’t pick and choose just what you need.

    Use the dist folder as a static directory with Express to serve these precompiled files:

    	express.static(__dirname + "/node_modules/@nice-digital/design-system/dist/")

    and then reference it from your HTML as:

    <link rel="stylesheet" href="/stylesheets/nice.min.css" type="text/css" />
    <script src="/javascripts/nice.min.js"></script>

    Note: you'll probably also need to serve the nice-icons icon font if you're doing this: app.use(express.static(__dirname + "/node_modules/@nice-digital/icons/dist/"));.

    Alternatively, use a script to copy the precompiled assets out of the node_modules folder to somewhere where you can serve them.


    We are planning on publishing the precompiled version of the Design System to the NICE CDN. Watch this space.




    npm i @nice-digital/design-system

    DownloadsWeekly Downloads






    Unpacked Size

    26.3 kB

    Total Files


    Last publish


    • martingallagher1980
    • ditprogrammatic
    • ediblecode
    • josealmeida
    • john-williams
    • mark-nice
    • nansenst
    • colin.mazurkiewicz
    • warrenkeith
    • imranazad
    • eleanormollett