ran
English

Design methods, components and tools

Build products with Ran Design, ranui components and ranuts utilities. Use each independently, with guidance for developers and agents.

Build with agentsStar on GitHub
Example

Invite a teammate

ViewerEditorAdmin
Simulate a failed requestSend invite

Guide sections this example followsInteractionWords

Real ranui components. Leave the email empty, or simulate a failure, to see each state.

Components
41
Utilities
90+
Languages
8
Licensed
MIT

Real states built with ranui

Uploading
quarterly-report.pdf64%
Cancel
Agent run
  1. Read 4 files
  2. Run the test suite
  3. Open a pull request
Loading
Glass
<r-glass>

Choose where to start

ranui

A framework-agnostic Web Components library. Drop 41 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

Ran Design

Methods for layout, interaction, motion and evidence-based review, independent of any component library.

Explore design

What most libraries leave out

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.
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.

Install and use

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

npm i ranui ranuts
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>