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 --savenpm 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 --savenpm i custom-elements-es5-adapter --savenpm 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>