JSPM

custom-elements-collection

0.2.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 428
  • Score
    100M100P100Q75163F
  • License MIT

A collection of 31 framework-agnostic Web Components (ce-* UI building blocks + lesson-* educational widgets) built on Lit. Ship as a single bundle, auto-register everything, or tree-shake down to the tags you use.

Package Exports

  • custom-elements-collection
  • custom-elements-collection/auto
  • custom-elements-collection/bar-chart
  • custom-elements-collection/bauhaus.css
  • custom-elements-collection/callout
  • custom-elements-collection/card
  • custom-elements-collection/chart
  • custom-elements-collection/chip
  • custom-elements-collection/code
  • custom-elements-collection/compare
  • custom-elements-collection/dark.css
  • custom-elements-collection/decision-tree
  • custom-elements-collection/details
  • custom-elements-collection/docs-layout
  • custom-elements-collection/example
  • custom-elements-collection/feature-card
  • custom-elements-collection/filter-bar
  • custom-elements-collection/flow
  • custom-elements-collection/grid
  • custom-elements-collection/gruvbox.css
  • custom-elements-collection/heatmap
  • custom-elements-collection/hero
  • custom-elements-collection/kpi
  • custom-elements-collection/lesson-audio
  • custom-elements-collection/lesson-frame
  • custom-elements-collection/lesson-gap
  • custom-elements-collection/lesson-quickfire
  • custom-elements-collection/lesson-quiz
  • custom-elements-collection/lesson-rule
  • custom-elements-collection/light.css
  • custom-elements-collection/manifest
  • custom-elements-collection/memphis.css
  • custom-elements-collection/muji.css
  • custom-elements-collection/nav-list
  • custom-elements-collection/neo-brutal.css
  • custom-elements-collection/nordic.css
  • custom-elements-collection/persona
  • custom-elements-collection/progress
  • custom-elements-collection/section
  • custom-elements-collection/shell
  • custom-elements-collection/solarized.css
  • custom-elements-collection/swiss.css
  • custom-elements-collection/table
  • custom-elements-collection/theme-switcher
  • custom-elements-collection/timeline
  • custom-elements-collection/toc
  • custom-elements-collection/tokens.css
  • custom-elements-collection/verdict

Readme

custom-elements-collection

npm license: MIT

A collection of 31 framework-agnostic Web Components built on Lit 3 — 25 general-purpose UI building blocks (ce-*) and 6 educational widgets (lesson-*). Drop them into any HTML page, any framework, any static site generator. No build step required on the consumer side.

30-second tour

<!doctype html>
<html data-ce-theme="dark">
<head>
  <link rel="stylesheet"
        href="https://unpkg.com/custom-elements-collection/dist/tokens/tokens.css">
  <script type="module"
          src="https://unpkg.com/custom-elements-collection/dist/auto.js"></script>
</head>
<body>
  <ce-shell>
    <ce-hero kicker="Status" title="Release readiness">
      <ce-kpi slot="stats" value="96%" label="Pass" color="green"></ce-kpi>
      <ce-kpi slot="stats" value="0"   label="Bugs" color="red"></ce-kpi>
    </ce-hero>
    <ce-callout type="success" title="Ready to ship">
      All quality gates green.
    </ce-callout>
  </ce-shell>
</body>
</html>

Install

pnpm add custom-elements-collection

Lit is bundled — no peer dependencies required.

Three ways to register tags

// A) Register every tag at once
import "custom-elements-collection/auto";

// B) Tree-shake to specific tags
import "custom-elements-collection/hero";
import "custom-elements-collection/kpi";
import "custom-elements-collection/lesson-quiz";

// C) Load dynamically at runtime
import { loadOnDemand } from "custom-elements-collection";
await loadOnDemand(["ce-hero", "ce-kpi", "lesson-rule"]);

Theming

All colors, spacing, and radii come from CSS custom properties named --ce-*. Ship the defaults and override anywhere:

<link rel="stylesheet"
      href="https://unpkg.com/custom-elements-collection/dist/tokens/tokens.css" />
:root {
  --ce-color-primary: oklch(72% 0.17 250);
  --ce-radius: 12px;
  --ce-font-sans: "Inter", system-ui, sans-serif;
}

Dark / light overrides are shipped as separate stylesheets:

<link rel="stylesheet"
      href="https://unpkg.com/custom-elements-collection/dist/tokens/dark.css" />
<link rel="stylesheet"
      href="https://unpkg.com/custom-elements-collection/dist/tokens/light.css" />

Component catalog

UI — layout & primitives (10)

ce-shell · ce-hero · ce-section · ce-grid · ce-card · ce-chip · ce-table · ce-callout · ce-details · ce-toc

UI — metrics & charts (5)

ce-kpi · ce-progress · ce-bar-chart · ce-chart · ce-heatmap

UI — comparison & narrative (10)

ce-verdict · ce-timeline · ce-compare · ce-flow · ce-decision-tree · ce-example · ce-feature-card · ce-persona · ce-code · ce-filter-bar

Lesson (6)

lesson-frame · lesson-rule · lesson-gap · lesson-quiz · lesson-quickfire · lesson-audio

A machine-readable manifest of every component is exported as COMPONENTS.

Design principles

  • Light DOM by default. Components render into the page's DOM, so markdown, Mermaid diagrams, and Chart.js canvases work inside slots. Shadow DOM is opt-in per component where style isolation matters. See ADR-002.
  • Theming via CSS custom properties. No per-component prop explosion. See ADR-003.
  • Zero config on the consumer side. One <script type="module"> from a CDN gets you all 31 tags.
  • Type-safe. Full .d.ts for every component and the manifest.

Documentation

  • Usage guide — plain HTML, bundlers, Vue / React / Svelte, theming, composition patterns, troubleshooting.
  • Architecture — repo layout, component anatomy, build pipeline, theming model.
  • ADRs — framework choice, Light DOM, theming, distribution modes.

Browser support

Any evergreen browser with native support for customElements, ES modules, and CSS.registerProperty (Chrome / Edge / Firefox / Safari 16.4+).

License

MIT