Skip to main content


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="[email protected]/dist/bundle.js"></script>
<!-- Include the CSS to style the elements -->
href="[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 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 will cause a clash in the custom element registry. When using Medblocks and Shoelace together, always import as mentioned above.