Learn how to use the npm packages within your website or application.
Visit the Getting started page to learn about options for working with the Design System code and to get a link to the code distribution package.
The use of npm packages allows our team to create, update and release artefacts that are versioned and consistent across all users.
They allow for easy installation, management and upgrades of Ontario Design System styles, fonts and components.
Choose the right package for your project
The Ontario Design System offers 4 types of packages that bundle different parts of the Design System:
The design tokens package includes all of the design tokens that are raw values used throughout the design system, such as colours, fonts, and generic elements and layouts.
It forms the base of the Ontario Design System npm packages. It can also be used to access the design tokens directly in projects, if you don’t want to use the global styles package.
The global styles package is the shared base package of the Ontario Design System styles.
It includes the Ontario Design System global styles and fonts and other assets for generic elements and layouts, but does not include component-specific styles. It can be used to access the base styles to build additional components.
Most users should be using the complete styles package or one of the component library packages within their applications to have access to all available styles and assets.
The complete styles package is a collection of all the Ontario Design System styles and assets.
It includes the Ontario Design System global styles, fonts, logos and icons, as well as component-specific styles.
If you’re looking to upgrade to the npm packages from the distribution package, start with the complete styles package. This package will give you the fonts, assets and styles for use with existing HTML components from the distribution package.
Web component libraries
Available component library packages:
- Web Component Library
- Use this package if you are working with plain HTML or any framework/tooling that does not use React or Angular. It contains our premade web component versions of our Design System components.
- React Web Component Library
- Use this package if you are working with React for your application, including with toolchains like Gatsby or NextJS.
- Angular Web Component Library
- Use this package if you are working with Angular for your application.