Skip to main content

Web Component Installation

The following options will give you access to the entire web component library. If you would like a specific version or release, please visit our NPM page to see whats available and follow the NPM / UNPKG instructions to download / link to a specific version.

  1. Pearson Web Components NPM Page
  2. Pearson CSS NPM Page

Important note: If you would like to download and install individual components, please visit our CDN and NPM links section.

CDN#
<script src="https://unpkg.com/@pearson-ux/pearson-web-components"></script>
NPM#
npm i @pearson-ux/pearson-web-components --save

Dependancies#

There are two components, including the full build that require moment.js.

  1. Datepicker
  2. Timepicker

Important note: You do not need these dependancies for CSS or other standalone web components that were NOT mentioned above.

CDN#
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-range/4.0.2/moment-range.js"></script>
NPM#
npm i moment-with-locales-es6 --save
npm i moment-range --save

Polyfills#

To make web components cross-browser compatible down to IE11 you will need the three following polyfills:

  1. Web component loader
  2. Custom elements es5 adapter
  3. Polyfill.io
CDN#
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/webcomponents-loader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/custom-elements-es5-adapter.js"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es5%2Ces6%2Ces7"></script>
NPM#

Important note: If you're installing polyfill.io from NPM, there is some additional information that may help you.

npm i webcomponents-loader --save
npm i custom-elements-es5-adapter --save
npm install polyfill-library --save

Example#

<head>
<title>Your Application</title>
<!-- CSS -->
<link rel="stylesheet" href="https://pearsonux.sfo2.cdn.digitaloceanspaces.com/css/gravity.css" />
<!-- load tippy -->
<script src="https://unpkg.com/tippy.js@4"></script>
<!-- Moment JS dependancy - needed for datepicker, timepicker, and the full build -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-range/4.0.2/moment-range.js"></script>
<!-- IE Polyfills -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/webcomponents-loader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/custom-elements-es5-adapter.js"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es5%2Ces6%2Ces7"></script>
<!-- Load all the components -->
<script src="https://unpkg.com/@pearson-ux/pearson-web-components"></script>
</head>
<body>
<main id="main">
<!-- place your app markup here -->
</main>
</body>