ran

Design methods, components and tools for building web products, for developers and coding agents.

Documentation · Components · Agents

English · 中文 · 日本語 · Español · Português · 한국어 · Deutsch · فارسی

ran has three parts, each usable on its own: ranui, UI components built as native custom elements; ranuts, typed TypeScript utilities; and Ran Design, methods for layout, interaction and review that people and coding agents can apply in any stack.

• Works with any framework, or none. Every component is an <r-*> tag, so React, Vue, Svelte and a plain HTML file use it the same way. There is no adapter or framework runtime, and one script tag is enough.
• Building blocks for AI chat interfaces. A conversation view that follows streaming output, Markdown that renders half-finished text, reasoning and tool-call rows, attachments and voice input. ranuts/stream parses the streamed response.
• Themes, server rendering and types included. Light and dark themes through design tokens, SSR helpers and TypeScript declarations ship with the package.
• Install only what you use. Each package and each component has its own entry point.

Packages

Package	What it is for
ranui	Forms, dialogs, tables, Markdown, media players and AI chat views as custom elements, with themes and server-rendering helpers.
ranuts	Helpers for strings, color, time, files, storage and the DOM, plus SSE parsing and streamed-response state.
Ran Design	Methods for composition, interaction, motion and evidence-based review. Ships as an agent plugin and does not require ranui.

ranui's builder and reactivity layer is published separately as @alixex/ranview.

Quick start

Without a build step, load a component from a CDN and write the tag:

<script src="https://cdn.jsdelivr.net/npm/ranui/dist/iife/button.iife.js" defer></script>
<r-button type="primary">Save</r-button>

With a bundler, install the package and import the components you use:

npm install ranui

import 'ranui/button';
import 'ranui/style';

ranui is in alpha and releases can include breaking changes, so pin an exact version in production. The component documentation has live examples, events and styling for every element.

Use with a coding agent

The ran plugin adds design, ranui and ranuts skills to Claude Code and Codex. It needs no MCP server or account.

claude plugin marketplace add chaxus/ran && claude plugin install ran@ran

codex plugin marketplace add chaxus/ran && codex plugin add ran@ran

In a new session, use /ran:design, /ran:ranui or /ran:ranuts in Claude Code, or $design, $ranui or $ranuts in Codex. To install from a local checkout instead, see the Agents guide; the skills themselves live in plugins/ran.

Contributing

Use Node 24+ and the pnpm version pinned in package.json.

pnpm install --frozen-lockfile
pnpm build
pnpm test
pnpm -F docs dev

Read AGENTS.md before contributing, and the release guide when preparing packages.

License

MIT