Skip to content
WCP

Astro

TypeScript Configuration

Add the Web Component types to your TypeScript configuration:

tsconfig.json
{
  "compilerOptions": {
    "types": [
      // Required: Enables JSX type support for Astro
      "@staticbolt/wcp/types/astro",


      // 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",
    ],
  },
}

This provides TypeScript support for the web components in your Astro application.

Importing Web Components

Web components are registered globally in the browser. Import once per page.

<script src="@staticbolt/wcp/[component-name]"></script>

Using Components With Astro

Astro treats web components as plain HTML elements.