No build step is required to use these components — files in public/ are served directly.
Every page links /ui/ui.css (shared component CSS + Open Props tokens) and /index.css (project-level semantic aliases + theme):
preload.mjs first
/preload.mjs must be the page's first module script, before all components. It installs polyfills that components need during initialization. Loading it later can silently lose property writes and leave popovers in the wrong position. <link rel="modulepreload"> only fetches a module; it does not execute it. See Browser support · Polyfills.
Each custom element is a separate ES module. Import only what the page uses.
Lib helpers (toast(), tooltip(), spin()) are imported from /ui/lib/*.mjs.
Put a small inline script in <head> before the stylesheet links so a returning dark-mode user doesn't see a flash of light. See Color · Flash prevention for the full pattern.
For local development, the project includes a Vite dev server:
Vite is not required at runtime — you can also serve public/ with any static server.
npm test — Node's native test runner with happy-dom. Alongside the unit suites it runs repo-wide checks: documentation links, file permissions, and style requirements across the repository.npm run test:wpt — Playwright browser tests for components.A minimal page using the shared stylesheet and a couple of components: