Open source · MIT Licensed

AWebComponentsUIlibraryandatypedutilitylibrary

ranui ships 40 framework-agnostic r- elements; ranuts packs 90+ tree-shakeable TypeScript helpers. Use them in Vue, React, or plain HTML, with no build step required.

npm i ranui ranuts

Explore Components Star on GitHub

Livehtml

<r-button type="primary">Primary</r-button>
<r-button>Default</r-button>
<r-button type="warning">Warning</r-button>

<r-progress percent="66"></r-progress>

<r-loading name="circle-line"></r-loading>
<r-checkbox checked>Subscribe</r-checkbox>

Primary

Default

Warning

Real ranui components, running right on this page.

40Components

90+Utilities

8Languages

MITLicensed

ranui

A framework-agnostic Web Components library. Drop 40 styled r- elements into any stack: Vue, React, or plain HTML.

Browse components

ranuts

90+ typed helpers for strings, objects, color, time, files and the DOM. Tree-shakeable, zero-dependency.

Read the docs

Articles

Longer write-ups on rendering engines, functional programming, sorting algorithms and the web platform.

Start reading

Capabilities

What most libraries leave out

Five in ranuts, five in ranui.

ranutsutilities

Bridge PostMessageBridgePromise-based RPC over postMessage across iframes, workers and tabs, with structured-clone transport and channel isolation.
Visual ApplicationA PixiJS-style scene graph with a pluggable WebGPU / WebGL / Canvas renderer backend.
Virtual DOM h() · init()A snabbdom-style vDOM: hyperscript, patch, pluggable modules and lifecycle hooks.
TOTP TOTPRFC-6238 one-time passwords, SHA-1 through SHA3-512, with zero crypto dependencies.
MIME registry getMime()A ~1000-entry bidirectional MIME ⇄ file-extension lookup.

ranuicomponents

Player <r-player>An HLS adaptive-streaming video player with a modular controller core.
Color picker <r-colorpicker>A full HSV picker with hue + alpha sliders and live HEX / RGBA output.
Radar chart <r-radar>A canvas-drawn radar chart with per-axis labels and per-axis label styling.
Math <r-math>Renders LaTeX to native MathML with lazily-loaded Temml, from a single attribute.
Scratch card <r-scratch>An interactive canvas scratch-to-reveal with a completion threshold.

Quick start

Install and use

Install both packages, register the elements once, and use them anywhere. No build step or framework required.

Install & register

$ npm i ranui ranuts

// register the <r-*> elements once
import 'ranui'
import { debounce } from 'ranuts'

Use anywhere

<!-- Vue, React, or plain HTML -->
<r-button type="primary">Save</r-button>
<r-progress percent="66"></r-progress>

Works everywhere

Standards-based custom elements run in any framework, or none at all.

Fully typed

Written in TypeScript, shipped with declarations end to end.

Installable & offline

The docs are a PWA, with their own service worker.

Eight languages

The ranui and ranuts reference is maintained in eight languages.