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
