Skip to main content

Getting started

The implementation of the Norton Design System for the web is composed of two main packages:

These two libraries do not depend on each other but work best when used together. Each is published to the public NPM registry under the @wwnds scope.

Core package

The core package is a Sass implementation of the foundations and styling for all components. It includes the following features:

npm install @wwnds/core

React package

The React package is a React implementation of the components with no styling applied. It includes the following features:

  • A React Typescript implementation of the Norton Design System components.
  • A rich developer experience powered by the comprehensive typings and descriptions for all top-level components and their props.
  • Useful React hooks to help you build stateless, functional applications.
npm install @wwnds/react

Independent package usage

Neither the core package nor the react package depend on one another and can therefore be used fully independently of each other. For instance, you could use @wwnds/core to style a Vue.js application, or you could apply your own styling to @wwnds/react without using anything from @wwnds/core.

However, this guide fill focus on combined usage, as the packages work best when used together.