Appearance

VARO / REGISTRY-FIRSTThe mobile UI Registry for Vue 3 + Wevu

For product teams shipping H5 and WeChat mini programs together. Copy editable source for each target, keep native rendering, and share stable behavior contracts plus the WeChat-green theme.

Install the Weapp Registry
Install the H5 Registry
Target-specific H5 and Weapp Registry install commands with H5 Live, Weapp Contract Preview, and Weapp DevTools Verified evidence labels

  • Editable Component Assets

    The Registry installs target-specific components, themes, and Blocks as source your product owns and can change without waiting on a shared abstraction.

  • Dual-target Behavior

    Vue 3 on H5 and Wevu in mini programs keep native rendering while sharing only types, pure functions, and headless behavior contracts.

  • Delivery Confidence

    H5 Live, Weapp Contract Preview, and Weapp DevTools Verified distinguish runtime behavior, contract previews, and DevTools evidence.

  • Registry first, Primitives on demand

    Public adoption starts in the Registry; teams building an internal design system can follow the technical docs down to primitives and runtime.

The Registry-first path ​

Varo is the Production foundation for cross-runtime component systems, but the default delivery is not one browser abstraction: choose a target, copy source, and keep extending it inside a Vue 3 or Wevu application.

Install the Weapp RegistryInstall the H5 RegistryBrowse the component catalogExplore Mini-program Blocks

Mini-program Blocks ​

Turn common product flows into editable assets

Varo Blocks cover frequent H5 and mini-program scenarios: orders, commerce, fresh grocery delivery, SaaS approvals, membership, store replenishment, payment confirmation, and account security become reusable screen slices instead of isolated component demos.

  • Install by target so source files and dependencies stay inspectable
  • Keep the same interaction semantics and WeChat-green visual tokens on both targets
  • Own the installed source and continue wrapping it for product-specific behavior
View business BlocksBuild your own Block
pnpm dlx @varo-ui/cli add \
  --target weapp blocks/profile-edit
9:41WeApp
Order DetailVaro Registry · Wevu native
FulfillmentIn transit · arrives by 18:30
Address
Invoice
Support
Refund
Payment SummaryWeChat Pay · ¥128.00
HomeOrdersProfile

Target Boundaries And Evidence ​

Registry contract v0.2These values render directly from the Registry contract; the homepage does not maintain a second count.
61H5 Runtime
62H5 Registry
53Weapp Registry
52Weapp Native SFC

DevTools-verified Base Kit · 15avatarbadgebuttoncardcheckboxemptyiconimageinputinput-numberloadingprogressselectswitchtag

51 high-consensus Weapp component familiesmap · region-picker

Technical boundaries after install ​

Registry Source

Own component, theme, utility, and Block source; this is the default product-team entry point.

Target Runtimes

Vue 3 owns the H5 DOM while Wevu and weapp-vite produce native WXML/WXSS.

Behavior Contracts

Primitives own controlled state and accessible interaction as the deeper technical path.

Agent Core

Add event protocols, streaming transport, and safe Markdown when needed without changing the UI target boundary.