Design methods, components and tools
Build products with Ran Design, ranui components and ranuts utilities. Use each independently, with guidance for developers and agents.
Example
Invite a teammate
Editor
Real ranui components. Leave the email empty, or simulate a failure, to see each state.
- Components
- 43
- Utilities
- 90+
- Languages
- 8
- License
- MIT
States and materials with ranui
quarterly-report.pdf64%
Read 4 files Run the test suite Open a pull request
<r-glass>Choose where to start
Ran Design
Methods for layout, interaction, motion and evidence-based review, independent of any component library.
Explore designranui
A framework-agnostic Web Components library. Drop 43 styled r- elements into any stack: Vue, React, or plain HTML.
Browse componentsranuts
90+ typed helpers for strings, objects, color, time, files and the DOM. Tree-shakeable, zero-dependency.
Read the docsCapabilities beyond the usual set
ranuicomponents
- Player Use when you need HLS adaptive video with a modular controller, not a full app shell.
- Color picker Use when a form needs HSV picking with live HEX / RGBA, not a native color input alone.
- Radar chart Use when you need a canvas radar chart with per-axis labels and label styles.
- Math Use when a single attribute should render LaTeX as native MathML.
- Scratch card Use when a reveal interaction needs a scratch threshold on canvas.
ranutsutilities
- Bridge Use when iframes, workers or tabs need Promise RPC over postMessage with isolated channels.
- Visual Use when you need a Pixi-style scene graph with a swappable WebGPU, WebGL or Canvas backend.
- Virtual DOM Use when you want snabbdom-style hyperscript, patch and pluggable modules without a framework.
- TOTP Use when you need RFC-6238 one-time passwords without pulling in a crypto library.
- MIME registry Use when you need a bidirectional MIME ⇄ extension lookup from a large built-in table.
Install and use
Install ranui and ranuts for the libraries. Ran Design and the agent plugin are separate entry points in the pillars above.
npm i ranui ranutsInstall & 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>