HTML and vanilla JS

@properui/html is Proper UI without React. It has three parts:

• CSS component classes (.pui-btn, .pui-modal, .pui-table, ...) written as Tailwind v4 @layer components rules that @apply the same semantic-token utilities the React components use. Colours, spacing, radii, dark mode and RTL behave the same as in React.
• Small vanilla-JS behaviours for the interactive pieces (dropdown menus, tabs, modals, accordions, tooltips, toasts, theme switching). No dependencies, about 17 KB minified. They attach by data-pui attribute and are idempotent.
• HTML snippets, one folder per component under packages/html/src/components, plus two whole pages (landing.html and dashboard.html) built only from this layer. The snippets are the copy-paste reference and are what properui add <name> installs on an html-platform project.

React is still the primary, fullest layer: 126 component groups on React Aria. This package covers a curated set of about twenty components (the table below) with native HTML primitives (<dialog>, <details>, real form controls) and the role/aria-* attributes its scripts set. See Frameworks for the support matrix and @properui/elements for the same components as custom elements.

Install

With the CLI, on a project with no React (Vue, Nuxt, Angular, Svelte, SvelteKit, Astro, or plain HTML):

npx @properui/cli@latest init          # "platform": "html"; wires @properui/tokens + @properui/html
npx @properui/cli@latest add buttons modals table

Or by hand:

npm i @properui/tokens @properui/html

Loading the CSS: three ways

1. No build step: the prebuilt stylesheet from a CDN. @properui/tokens ships properui.min.css: Tailwind's preflight, every token, dark mode, and all of the pui-* classes, compiled.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@properui/tokens/dist/properui.min.css" />
<script src="https://cdn.jsdelivr.net/npm/@properui/html/dist/properui-html.iife.js" data-auto-init defer></script>

Pin versions in production (@properui/tokens@0.1.0). This package's own build also writes an equivalent dist/properui.css (@properui/html/properui.css), which the page examples link.

2. Tailwind v4 in any framework: import the source. The component layer is Tailwind source, so it compiles with your own utilities and your theme overrides:

@import "tailwindcss";
@import "@properui/tokens/theme.css";
@import "@properui/html/css";

/* Only if you copied snippets that also carry utility classes of your own: */
@source "./src/**/*.html";

@properui/html/css does not import Tailwind or the tokens itself; your entry does, once. Every class is in @layer components, so a utility on the same element (class="pui-btn mt-4") still wins.

3. Copy. The files are plain CSS with @apply: copy src/css/*.css (and src/index.css) into your project and import them after Tailwind and the tokens. Edit freely; nothing regenerates them.

Loading the JS

<!-- Classic script: window.ProperUI, init() on DOMContentLoaded -->
<script src="https://cdn.jsdelivr.net/npm/@properui/html/dist/properui-html.iife.js" data-auto-init defer></script>

// A bundler or <script type="module">
import { init, setTheme, toast } from "@properui/html";

init(); // or init(someElement) after rendering new markup

Classes

Block, __element, --modifier, all prefixed pui-. Sizes are --sm | --md | --lg | --xl where they apply; colours use the React prop names. Defaults match React (pui-btn alone is a primary sm button; pui-badge alone is a gray md pill).

Helpers: .pui-sr-only (visually hidden) and .pui-skip-link.

Behaviours (data-pui)

init(root?) sets up every one of these under root. Each element is marked with data-pui-ready once set up, so calling init again after a re-render or an HTMX swap is safe.

JS API

init(root?: ParentNode): void;
initDropdowns(root?): void;  initTabs(root?): void;  initModals(root?): void;  initAccordions(root?): void;
initTooltips(root?): void;   initDismiss(root?): void;  initThemeToggles(root?): void;  initToastTriggers(root?): void;
openModal(dialog: HTMLDialogElement, opener?: HTMLElement): void;
closeModal(dialog: HTMLDialogElement, returnValue?: string): void;
toast(opts: { title: string; description?: string; variant?: "success" | "error" | "warning" | "info"; duration?: number }): void;
setTheme(theme: "light" | "dark" | "system"): void;
getTheme(): "light" | "dark" | "system";

• toast creates the .pui-toaster region on first use (aria-live="polite"), sets the title and description as text (never HTML), and dismisses after duration ms (default 5000; 0 keeps it until closed), pausing while hovered or focused.

• setTheme puts .dark-mode (or .light-mode) on <html> and saves the choice in localStorage under "theme": the same key and values the React ThemeProvider uses, so a page mixing both layers agrees. "system" follows prefers-color-scheme and keeps following it. init() re-applies a saved choice. To avoid a flash of the wrong theme, put this in <head> before the stylesheet:

  <script>
      try {
          const t = localStorage.getItem("theme");
          if (t === "dark" || (t === "system" && matchMedia("(prefers-color-scheme: dark)").matches)) document.documentElement.classList.add("dark-mode");
      } catch {}
  </script>
  

The default export is the same functions as one object, and the IIFE build exposes it as window.ProperUI.

What is React-only

Said plainly, so nobody finds out the hard way:

• Behaviour depth. The React components run on React Aria: typeahead in every collection, virtual focus, press/hover normalisation across touch, pen and mouse, locale-aware date and number handling, screen-reader announcements tuned per component. This layer uses native elements plus a few hundred lines of script. It covers the common keyboard paths (Escape, arrow keys in menus and tabs, focus return from dialogs); it is not a port.
• Components. Everything outside the table above: select with search (combobox), multi-select, date and time pickers, calendars, sliders, number and tag inputs, file upload, command menu, menubar, popover, hover card, data table (sorting, selection model, resizing), tree view, charts, kanban, gantt, code editor, rich text editor, carousel, the marketing sections and page examples, and the rest of the 126 groups.
• Menus. No submenus, no checkbox or radio menu items, no selection state in the dropdown.
• Tables. A styled <table>: no keyboard grid navigation, no sorting, no selection model. Row selection in the snippet is plain checkboxes.
• Tooltips. Above or below only (no left/right placement), and no collision handling beyond that flip and a clamp to the viewport.
• Toasts. No stacking animation, swipe to dismiss, or action buttons.
• Animations. Simple CSS enter animations; no exit animation for menus, tooltips or modals.

Snippet icons are inline SVG copied from @properui/icons. Snippets and page examples use no external images.