Skip to content
theme-kit

Web Components

@theme-kit/web

Custom ElementsNo framework5 exports

Framework-free theming for any HTML page via custom elements.

Installation

View on npm ↗Source ↗

Install the integration alongside @theme-kit/core.

bash
pnpm add @theme-kit/web

Quick Start

Complete copy-paste usage for this package.

index.html
html
1import { defineCustomElements } from "@theme-kit/web";
2defineCustomElements();
3
4<theme-kit-provider themes="...">
5  <theme-kit-toggle></theme-kit-toggle>
6  <theme-kit-select></theme-kit-select>
7</theme-kit-provider>

API Reference

Curated highlights below. The complete generated reference — every signature, parameter and type — is at /api-reference/web.

Elements

ExportDescription
<theme-kit-provider>Root runtime provider.
<theme-kit-scope theme>Scoped theming.
<theme-kit-toggle>Light / dark toggle button.
<theme-kit-select>Family / mode selector.
getProviderRuntime()Imperative access to the runtime.
@theme-kit/web — Theme Kit