Overview

Design principles

• Native first. Use <dialog>, the Popover API, and CSS Anchor Positioning for native modal and popover behavior.
• Light DOM. Shadow DOM only when styles must not leak. App-level CSS can reach inside components.
• No build step for runtime. Files in public/ are served directly. Vite runs a dev server for convenience; it is not required.
• Tokens over utilities. Open Props custom properties; style via element / contextual selectors, not utility classes.
• Minimal framework maintenance. Vanilla JS and native elements avoid a framework upgrade cycle.

Where things live

public/ui/components/

Custom elements — one class per .mjs, tagged ui-* or x-*

public/ui/lib/

Shared helpers — dialog.mjs, toast.mjs, tooltip.mjs, theme.mjs, l10n.mjs, etc.

public/ui/ui.css

Central stylesheet — imports Open Props tokens, extras and forms.css, and defines the CSS that several components or plain markup share. A component's own CSS lives in its module.

public/ui/docs/

These docs

public/ui/test/

Tests per component — *.test.mjs runs under npm test (Node's test runner + happy-dom), *wpt.spec.mjs under npm run test:wpt (Playwright, Chromium and Firefox)

public/open-props/

Open Props token layer (vendored)

public/index.css

Project-level semantic aliases + dark-mode theme

Navigating the docs

• Docs home — landing hub with all sections.
• Components — custom elements and shared CSS patterns, grouped by role.
• Styles — tokens and visual guidance (color, typography, motion, etc.).
• About — this section. See also Getting started, Conventions, Accessibility, Browser support, Cross-system reference, Localization.