Skip to content

Installing PodOS

Using a CDN

Instead of installing, you can directly include PodOS into your html page by loading it from a CDN.

Include one of the following snippets to the <head> section of your html, depending on which CDN you would like to use.

<script
    type="module"
    src="https://cdn.jsdelivr.net/npm/@pod-os/elements/dist/elements/elements.esm.js">
</script>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@pod-os/elements/dist/elements/elements.css"
/>

<script
    type="module"
    src="https://esm.sh/@pod-os/elements/dist/elements/elements.esm.js">
</script>
<link
  rel="stylesheet"
  href="https://esm.sh/@pod-os/elements/dist/elements/elements.css"
/>

<script
    type="module"
    src="https://unpkg.com/@pod-os/elements/dist/elements/elements.esm.js">
</script>
<link
  rel="stylesheet"
  href="https://unpkg.com/@pod-os/elements/dist/elements/elements.css"
/>

Info

The snippets above will point to the latest version of PodOS. If you want to stick to specific version, the CDNs allow to add an explicit version number to the URL, e.g. https://cdn.jsdelivr.net/npm/@pod-os/elements@0.28.0/dist/elements/elements.esm.js

Installing from npm

If you do not want to rely on a CDN, you can install PodOS from npm:

npm install @pod-os/elements

If you are not using a bundler, you can include the JS and CSS files from the node_modules folder:

<script
    type="module"
    src="node_modules/@pod-os/elements/dist/elements/elements.esm.js">
</script>
<link
  rel="stylesheet"
  href="node_modules/@pod-os/elements/dist/elements/elements.css"
/>

If you are using a bundler for your app, you can do the imports in your main JS / CSS files:

In your app entry point, e.g. index.js, main.ts or app.tsx add:

import '@pod-os/elements';

In a global css file add:

@import '~@pod-os/elements/dist/elements/elements.css';