Skip to main content

Installation

Some front-end frameworks support custom elements better than others.

Medblocks UI can be used with a CDN script or with a modern bundler like Vite or Snowpack.

Using a CDN​

Include the following in your HTML file:

<script src="https://unpkg.com/[email protected]/dist/bundle.js"></script>
<!-- Include the CSS to style the elements -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/light.css"
/>

Using NPM Install​

If you don’t want to use the CDN, you can install Medblocks UI from npm with the following command.

Using npm:

npm install medblocks-ui

Using yarn:

yarn add medblocks-ui

Using pnpm:

pnpm add medblocks-ui

Import Medblocks UI in your Typescript or Javascript file. You can also import it in your Vue, JSX, TSX, or Svelte files. Make sure the import happens before any custom elements are used.

You also need to import the CSS file for styling to work. To import the default CSS file:

import "medblocks-ui" import "medblocks-ui/dist/styles.js"

If you intend on using other Shoelace.style elements, import both the modules together. The default styling of shoelace is automatically imported:

import "medblocks-ui" import "medblocks-ui/dist/shoelace"

Importing a different version of Shoelace.style will cause a clash in the custom element registry. When using Medblocks and Shoelace together, always import as mentioned above.