P.R.I.M.E.

Pretty Rad Interactive Modular Elements.

Made with ❤️ at Viam.

Getting started

PRIME is a collection of atomic UI elements, designed to "just work" in any HTML-based environment, regardless of framework or lack thereof. It is a web component library.

Installation

The PRIME NPM package contains the following necessary exports for usage:

• prime.es.js or prime.umd.js - JS that defines custom elements. ES modules are recommended over UMD.
• prime.css - stylesheet shared by all elements.

If using ES modules, import Prime's JS file into your code:

import '@viamrobotics/prime';

You must host prime.css in a static file server. This is every prime element loads it as a shared stylesheet.

If you are not hosting prime.css at the root directory of your domain, you will need to add a PRIME_CONFIG global variable before loading the JS file:

<script type="module">
  window.PRIME_CONFIG = {
    base: '/path/to/static/folder',
    query: '?v=someCacheBustingHashIfNeeded',
  };
</script>

If the necessary .css and .js files have been added, then no additional imports are needed! You can immediately start adding PRIME elements to your app, since prime elements are simply custom HTML elements:

<v-button label="Hello world!" />

All elements are prefixed with v-. This stands for Viam, the cool company where these elements are made.

Playground

To use the playground, go to the playground directory, and:

pnpm install
pnpm start

Or to run in production mode:

pnpm run build
pnpm run serve

Linting / Testing

To lint and typecheck:

pnpm run lint
pnpm run check

To test:

pnpm run test-dev # to test with the playwright debug UI
# or
pnpm run test # to test in headless mode

# to run specific tests
pnpm run test <test-name> # for <test-name>.spec.ts

Browser Compatibility

PRIME supports the following browsers:

Latest ✔	Latest ✔	Latest ✔	Latest ✔

License

Copyright 2021-2023 Viam Inc.

Apache 2.0 - See LICENSE file