Appearance

VaroProduction foundation for cross-runtime component systems

A shared foundation for H5 and mini-program primitives, UI wrappers, theme tokens, and business blocks. Editable source and delivery checks keep both targets consistent and maintainable.

Quick Start
Components

  • Dual-target Behavior

    Primitives, controlled state, accessible interaction, and platform adapters keep core behavior from being rebuilt.

  • Editable Component Assets

    Components, themes, blocks, and cross-runtime code stay organized by task and ready for product extension.

  • Delivery Confidence

    H5 and mini-program packages share interaction semantics, state models, and test entry points to reduce release drift.

  • Primitives First

    The default UI is one layer; internal design systems can continue building from the headless runtime.

Start Here ​

Component OverviewAI Agent ComponentsInstallationCross-platform Examples

Mini-program Blocks ​

Turn common business flows into reusable assets

Varo blocks target 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.

  • Organized like a blocks catalog, but grounded in mobile commerce, grocery, SaaS operations, and settings workflows
  • H5 and mini-program previews share the same interaction semantics and visual tokens
  • Each block keeps a source-oriented entry point for product reuse
View business blocksCompose Navbar
<v-navbar title="Order Detail" />
<v-cell-group title="Fulfillment">
  <v-cell title="Delivery" desc="Same-city express" arrow />
  <v-cell title="Payment" desc="Paid" />
</v-cell-group>
<v-tabbar :items="actions" />
9:41WeApp
Order Detailshadcn blocks for mini-program
FulfillmentIn transit · arrives by 18:30
Address
Invoice
Support
Refund
Payment SummaryWeChat Pay · ¥128.00
HomeOrdersProfile

Dual-target Coverage ​

The Base Kit contains 15 native SFC components verified by WeChat DevTools: avatar, badge, button, card, checkbox, empty, icon, image, input, input-number, loading, progress, select, switch, and tag.

Registry supports h5 and weapp: H5 covers all 56 runtime families; the mini-program registry exposes 45 high-consensus families plus RegionPicker and native Map extensions. Every copy-owned Weapp renderer is a target-specific native Wevu SFC; pure adapters may re-export target primitives, and only types, pure functions, and headless primitives are shared across targets. registry/component-tiers.v0.1.json is the machine-readable boundary.

Package Boundaries ​

Primitives

Headless interaction, controlled state, and accessibility contracts.

UI Wrappers

Official H5 and mini-program wrappers built on top of primitives.

Theme

Token-driven color, sizing, and component style inputs.

Agent Core

Shared event protocol, SSE/chunk transport, smooth reveal, and safe Markdown AST.