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:

npm install
npm start

Or to run in production mode:

npm run build
npm run serve

Linting / Testing

To lint and typecheck:

npm run lint
npm run check

To test:

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

Browser Compatibility

PRIME supports the following browsers:

Latest ✔	Latest ✔	Latest ✔	Latest ✔

License

Copyright 2021-2022 Viam Inc.

Apache 2.0 - See LICENSE file