Skip to main content

Installing WebJET Elements

You can use WebJET Elements in two main ways:

  • via npm - recommended for applications with bundler (Vite, webpack, Rollup),
  • via CDN - suitable for prototypes, simple integrations or static sites.

Installing with npm​

You install the package into the project using npm:

Make sure you have Node.js installed on your computer before proceeding. To set up the environment for Elements, see these instructions.

$ npm install wj-elements

Then import the component bundles and styles into the application:

import 'wj-elements';
import 'wj-elements/style.css';
import 'wj-elements/light.css';

// Optional: if you want to use the built-in dark theme
import 'wj-elements/dark.css';

Minimum example of use​

<wje-button>Confirm</wje-button>

Assets and base path​

Some parts of the library load assets relative to the base path of the library. If you copy the contents of dist/ to a custom location in your application, set the base path explicitly:

import { setBasePath } from 'wj-elements';

setBasePath('/vendor/wj-elements/dist');

This setting is especially useful when working with icons or components that load files from dist/assets. This includes the default wje-img loader, which is loaded from /vendor/wj-elements/dist/assets/img/image-loader.gif with the configuration above. Deploy the dist/assets directory together with the modules.

Installation with CDN​

If you don't want to use the bundler, you can load the ready build directly from the CDN.

It is recommended to load:

  • the main module wje-master.js,
  • basic styles styles.css,
  • light theme light.css,
  • or even dark.css if you want to toggle the dark mode.
<script data-base-path="https://cdn.jsdelivr.net/npm/wj-elements@0.4.1/dist/"></script>
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/wj-elements@0.4.1/dist/wje-master.js"
></script>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/wj-elements@0.4.1/dist/styles.css"
/>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/wj-elements@0.4.1/dist/light.css"
/>

The data-base-path attribute helps the library to correctly locate internal assets in the CDN build.

Content