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
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>
NPM​
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>
    <!-- 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>