外观

Varo跨运行时组件系统的生产底座

为 H5 与小程序提供统一的 primitives、组件封装、主题 token 和业务 blocks。用可复制源码与交付校验，让双端产品保持一致、可维护。

快速开始
查看组件

  • 双端行为底座

    primitives、受控状态、可访问交互与平台适配拆层交付，避免重复实现核心行为。

  • 可复制组件资产

    组件、主题、blocks 与跨端代码统一收敛，按任务找到资产后即可继续业务封装。

  • 交付可靠性

    H5 与小程序共享交互语义、状态模型和测试入口，降低双端发布漂移。

  • Primitives First

    默认 UI 只是上层实现，企业设计系统仍可从 headless runtime 继续封装。

开始使用 ​

组件总览AI Agent 组件安装指南跨端示例

小程序 Blocks ​

把常用业务做成可复制资产

Varo 的 blocks 面向小程序与 H5 高频场景：订单、电商、生鲜到家、SaaS 审批、会员权益、门店补货、支付确认和账户安全都可以沉淀成可复用页面切片，而不是只展示孤立组件。

  • 参考 blocks catalog 的组织方式，但内容贴近京东、淘宝、叮咚买菜、SaaS 后台等移动业务
  • H5 与小程序展示同一套交互语义和相近视觉 token
  • 每个 block 都保留源码入口，方便复制后继续业务封装
查看业务 Blocks组合 Navbar
<v-navbar title="订单详情" />
<v-cell-group title="履约信息">
  <v-cell title="配送方式" desc="同城即时达" arrow />
  <v-cell title="支付状态" desc="已支付" />
</v-cell-group>
<v-tabbar :items="actions" />
9:41WeApp
订单详情shadcn blocks for mini-program
履约信息配送中 · 预计 18:30 送达
地址
发票
客服
售后
支付摘要微信支付 · ¥128.00
首页订单我的

双端组件覆盖 ​

Base Kit 包含 15 个已经通过微信开发者工具编译的原生 SFC 组件：avatar、badge、button、card、checkbox、empty、icon、image、input、input-number、loading、progress、select、switch、tag。

Registry 同时支持 h5 与 weapp：H5 覆盖 56 个 runtime 组件族；小程序开放 45 个高共识组件族，并增加 RegionPicker 与原生 Map 扩展。copy-owned Weapp renderer 均为 target-specific 原生 Wevu SFC；纯 adapter 可重导出目标 primitives，双端仅共享类型、纯函数和 headless primitives。完整分级由 registry/component-tiers.v0.1.json 约束。

包边界 ​

Primitives

沉淀无样式交互、受控状态和可访问性约定。

UI Wrappers

在 primitives 之上提供 H5 与小程序官方封装。

Theme

用主题 token 统一颜色、尺寸和组件级样式输入。

Agent Core

统一事件协议、SSE/分块传输、平滑输出和安全 Markdown AST。