ranui

ranui — web component library

Framework-agnostic Web Components (Custom Elements + Shadow DOM). Works in React, Vue, Svelte, Solid, or plain JS. Each element is <r-*> and is used like native HTML. Styling crosses the shadow boundary via CSS variables, ::part(), or the per-instance sheet attribute (escape hatch).

Authoritative reference (read these for exact APIs — don't guess)

When ranui is installed in a project, its docs ship inside the package:

• node_modules/ranui/docs/COMPONENTS.md — generated per-element API: every element's attributes, typed properties, events (with detail shape), slots, and ::part() names. This is the source of truth for props/events. Regenerated in the source repo via npm run doc:api.
• node_modules/ranui/docs/DESIGN.md — design system rules (color states, spacing, motion, accessibility §7, pre-ship checklist).
• node_modules/ranui/docs/style-tokens-public.md — the CSS variable (theming token) catalog.

In the source repo (packages/ranui) there is also a deep CLAUDE.md (architecture, builder internals, LESS conventions, testing) — not shipped in the npm package.

Import map

Per-component, tree-shakeable side-effect imports register the custom element:

import 'ranui/button';   // then use <r-button>
import 'ranui/modal';
import 'ranui/select';
import 'ranui/input';
import 'ranui/message';  // also exposes an imperative message API
import 'ranui/checkbox';

Available element subpaths: button icon image input message skeleton tab tabpane radar modal select progress player popover dropdown content loading colorpicker math checkbox card router route link.

The fluent DOM builder + reactivity (no custom-element registration):

import { Div, View, Span, Label, ButtonBuilder, signal, createEffect, EventManager, Style } from 'ranui/builder';

SSR helpers: import { defineSSR } from 'ranui/ssr-registry' (source) / ranui/ssr, ranui/ssr-stream. Types: ranui/typings.