Vanilla HTML

TypeScript Configuration

Add the Web Component types to your TypeScript configuration:

{
  "compilerOptions": {
    "types": [
      // Optional: Adds native DOM types (e.g. `querySelector`, `document`)
      "@staticbolt/wcp/types/dom",

      // Optional: Exposes component types globally (no imports needed)
      "@staticbolt/wcp/types/global",
    ],
  },
}

Importing Web Components

With a Build Tool

If you are using a build tool such as Vite, import the component as an ES module.
The component self-registers when the module is evaluated.

import "@staticbolt/wcp/[component-name]";

Without a Build Tool

WCP CLI

Use the wcp add command to copy the minified component files into your project:

npx wcp add --components [component-name] --outdir public/wcp

Then reference the file directly in your HTML. WCP components work with both classic and module scripts.

<script type="module" src="/wcp/[component-name].js"></script>

<!-- Or classic script -->
<script src="/wcp/[component-name].js"></script>

CDN

You can load components directly from a CDN that mirrors the npm registry — no installation needed.

unpkg

<script type="module" src="https://unpkg.com/@staticbolt/wcp/[component-name]"></script>

jsDelivr

<script type="module" src="https://cdn.jsdelivr.net/npm/@staticbolt/wcp/[component-name]"></script>

esm.sh (ES modules only)

<script type="module" src="https://esm.sh/@staticbolt/wcp/[component-name]"></script>