Proto UI

Proto UI is a framework-independent component interaction protocol and a toolchain for projecting the same prototype into different hosts.

A Proto UI prototype describes the identity and interaction semantics of a component. Adapters translate that protocol into React, Vue, Web Components, and, over time, other platforms. The goal is to make interaction logic explicit, testable, reusable, and portable across ecosystems.

English | 中文

Status: Proto UI is a v0 project. The exact 0.2.0 ecosystem release is available on npm under the stable latest channel. Stable publication on the 0.2 line does not imply a v1 compatibility promise; evaluate the current boundaries before production adoption.

The core idea

Component implementations change across frameworks, but the interactive subject should remain recognizable. Proto UI separates those layers:

Prototype protocol -> Adapter -> Host component instance

The prototype owns portable behavior and semantic identity. The Adapter owns translation into a host. Applications continue to compose and use the resulting components through their native framework.

This is deliberately different from inventing another application framework: Proto UI is intended to work with the stack you already have.

A compiler-based path remains a longer-term direction:

Prototype protocol -> Compiler -> Host component code

The current release is Adapter-based. Compiler output and zero-runtime delivery are not current shipped guarantees.

Start with stable 0.2.0

The public onboarding flow uses npm latest. For this release, @latest resolves to 0.2.0, and the CLI installs Adapter and Prototype packages at its own exact version so the ecosystem stays on one release train:

npx @proto.ui/cli@latest --help
npx @proto.ui/cli@latest init
npx @proto.ui/cli@latest add react shadcn-button

Run init and add from an existing application project. The CLI creates a local proto-ui/ workspace, installs the matching official packages, writes style presets, and generates host-specific component facades.

Follow the complete Quick Start for generated paths, style imports, typed component usage, multiple hosts, and the current limitations. See the v0.2.0 release for release evidence.

What exists today

• Official Adapters for React, Vue, and Web Components.
• A Base prototype library for reusable interaction protocols.
• A Shadcn-derived prototype library that layers a design-language surface over Base protocols.
• A Lucide-derived icon prototype library with per-icon import paths.
• A CLI for initialization, exact-version package installation, style generation, and host component facades.
• A machine-validated spec catalog connecting knowledge, decisions, contracts, prototypes, modules, host capabilities, conformance cases, and executable test paths.

Current boundaries