Cross-runtime Showcase

This is Varo’s public cross-runtime showcase: choose an adoption path first, then distinguish live browser interaction, a browser-rendered Weapp contract preview, and compiled evidence from WeChat DevTools. Repository playgrounds remain maintainer QA surfaces, not the public installation path.

Choose an Adoption Path

H5 REGISTRY

H5 Product

pnpm dlx @varo-ui/cli add --target h5 components/button

Installs editable Vue component source and dependencies into the product repository.

WEAPP REGISTRY

Weapp Product

pnpm dlx @varo-ui/cli add --target weapp components/button

Installs target-specific, WXML-safe Wevu SFC source and dependencies into the product repository.

RUNTIME PACKAGE

Centralized H5 Runtime

pnpm add @varo-ui/h5

Consumes the published package when coordinated upgrades are intentional.

Registry installation is the default path. Start with the installation guide, then generate source for the selected target.

H5 Live & Weapp Contract Preview

The components below are directly operable. H5 runs real @varo-ui/h5 browser components; switching target is explicitly labelled Weapp Contract Preview so the browser-rendered API and visual contract is not mistaken for the mini-program runtime.

Cross-platform Overview Example and Preview

Invalid state

H5 LiveInteractive browser runtime

Name

9/16

Current value: Avery Lin

Dialog PreviewComposable dialog

Weapp DevTools Verified: Compiled Blocks

The images below were captured through WeChat DevTools automation from Block pages built by weapp-vite. The evidence snapshot is dated 2026-08-28; inspect the capture script and a representative original image. Every card also links directly to its original image.

Selecting H5 changes the install command and usage code only. When the repository has no published H5 image for that Block, the card continues to identify the image as Weapp DevTools Verified instead of implying that the H5 selector changed it.

REGISTRY BLOCKS

See the interface, then generate the source

Every card comes from a real mini-program Block: Headless owns state and interaction, while the Base Kit owns visuals. Review the interface, then copy one command to generate the source and recursive dependencies.

13 BLOCKS

Search

Showing 13 BlocksImage evidence: Weapp DevTools Verified · 2026-08-28

Weapp DevTools Verified2026-08-28

login-form

Login Form

business

Phone, password, remember, error, and loading states.

Weapppnpm dlx @varo-ui/cli add --target weapp blocks/login-form

Code

Generate with one commandRun at the project root. The CLI writes the Block and required component source recursively.

Usage examplesrc/components/blocks/login-form.vue

<script setup lang="ts">
import LoginForm from '@/components/blocks/login-form.vue'

function handleLogin(credentials: unknown) {
  console.log(credentials)
}
</script>

<template>
  <LoginForm @submit="handleLogin" />
</template>

Weapp DevTools Verified2026-08-28

profile-card

Profile Card

business

Avatar, identity status, statistics, and edit action.

Weapppnpm dlx @varo-ui/cli add --target weapp blocks/profile-card

Code

Generate with one commandRun at the project root. The CLI writes the Block and required component source recursively.

Usage examplesrc/components/blocks/profile-card.vue

<script setup lang="ts">
import ProfileCard from '@/components/blocks/profile-card.vue'

const user = { name: 'Varo User', status: 'Active' }
const stats = [{ label: 'Orders', value: 12 }]
function openEditor() {}
</script>

<template>
  <ProfileCard :user="user" :stats="stats" @edit="openEditor" />
</template>

Weapp DevTools Verified2026-08-28

profile-edit

Profile Edit

business

Name, phone, searchable city, biography, and submit state.

Weapppnpm dlx @varo-ui/cli add --target weapp blocks/profile-edit

Code

Generate with one commandRun at the project root. The CLI writes the Block and required component source recursively.

Usage examplesrc/components/blocks/profile-edit.vue

<script setup lang="ts">
import ProfileEdit from '@/components/blocks/profile-edit.vue'

const cities = [{ label: '杭州', value: 'hangzhou' }]
function saveProfile(profile: unknown) {
  console.log(profile)
}
</script>

<template>
  <ProfileEdit :cities="cities" @submit="saveProfile" />
</template>

Weapp DevTools Verified2026-08-28

product-list

Product List

business

Products, inventory, pricing, empty state, selection, and cart actions.

Weapppnpm dlx @varo-ui/cli add --target weapp blocks/product-list

Code

Generate with one commandRun at the project root. The CLI writes the Block and required component source recursively.

Usage examplesrc/components/blocks/product-list.vue

<script setup lang="ts">
import ProductList from '@/components/blocks/product-list.vue'

const products = []
function addToCart(payload: unknown) {
  console.log(payload)
}
</script>

<template>
  <ProductList :items="products" @add-to-cart="addToCart" />
</template>

Weapp DevTools Verified2026-08-28

order-filter

Order Filter

business

Status selection, amount validation, reset, and apply events.

Weapppnpm dlx @varo-ui/cli add --target weapp blocks/order-filter

Code

Generate with one commandRun at the project root. The CLI writes the Block and required component source recursively.

Usage examplesrc/components/blocks/order-filter.vue

<script setup lang="ts">
import OrderFilter from '@/components/blocks/order-filter.vue'

function loadOrders(filters: unknown) {
  console.log(filters)
}
</script>

<template>
  <OrderFilter :result-count="128" @apply="loadOrders" />
</template>

Weapp DevTools Verified2026-08-28

agent-chat

Agent Chat

agent

Incremental Markdown, tool state, approvals, and composer.

Weapppnpm dlx @varo-ui/cli add --target weapp blocks/agent-chat

Code

Generate with one commandRun at the project root. The CLI writes the Block and required component source recursively.

Usage examplesrc/components/blocks/agent-chat.vue

<script setup lang="ts">
import AgentChat from '@/components/blocks/agent-chat.vue'

const messages = [{ id: 'welcome', role: 'assistant', content: '你好' }]
function runAgent(prompt: string) {
  console.log(prompt)
}
</script>

<template>
  <AgentChat :messages="messages" @submit="runAgent" />
</template>

Weapp DevTools Verified2026-08-28

retail-home

Retail Home

retail

Search, categories, featured products, and cart entry.

Weapppnpm dlx @varo-ui/cli add --target weapp blocks/retail-home

Code

Generate with one commandRun at the project root. The CLI writes the Block and required component source recursively.

Usage examplesrc/components/blocks/retail-home.vue

<script setup lang="ts">
import RetailHome from '@/components/blocks/retail-home.vue'

const categories = []
const products = []
</script>

<template>
  <RetailHome :categories="categories" :products="products" />
</template>

Weapp DevTools Verified2026-08-28

retail-category

Retail Category

retail

Two-column category navigation, product grid, and cart actions.

Weapppnpm dlx @varo-ui/cli add --target weapp blocks/retail-category

Code

Generate with one commandRun at the project root. The CLI writes the Block and required component source recursively.

Usage examplesrc/components/blocks/retail-category.vue

<script setup lang="ts">
import { shallowRef } from 'wevu'
import RetailCategory from '@/components/blocks/retail-category.vue'

const activeId = shallowRef('women')
const categories = []
const products = []
</script>

<template>
  <RetailCategory v-model:active-id="activeId" :categories="categories" :products="products" />
</template>

Weapp DevTools Verified2026-08-28

retail-cart

Retail Cart

retail

Selection, quantity, totals, empty state, and checkout.

Weapppnpm dlx @varo-ui/cli add --target weapp blocks/retail-cart

Code

Generate with one commandRun at the project root. The CLI writes the Block and required component source recursively.

Usage examplesrc/components/blocks/retail-cart.vue

<script setup lang="ts">
import RetailCart from '@/components/blocks/retail-cart.vue'

const cartItems = []
const total = 0
function checkout() {}
</script>

<template>
  <RetailCart :items="cartItems" :total="total" @checkout="checkout" />
</template>

Weapp DevTools Verified2026-08-28

retail-product-detail

Product Detail

retail

Product image, pricing, stock, quantity, cart, and buy actions.

Weapppnpm dlx @varo-ui/cli add --target weapp blocks/retail-product-detail

Code

Generate with one commandRun at the project root. The CLI writes the Block and required component source recursively.

Usage examplesrc/components/blocks/retail-product-detail.vue

<script setup lang="ts">
import { shallowRef } from 'wevu'
import RetailProductDetail from '@/components/blocks/retail-product-detail.vue'

const quantity = shallowRef(1)
const product = {}
</script>

<template>
  <RetailProductDetail v-model:quantity="quantity" :product="product" />
</template>

Weapp DevTools Verified2026-08-28

retail-checkout

Retail Checkout

retail

Address, products, coupons, invoice, totals, and order submission.

Weapppnpm dlx @varo-ui/cli add --target weapp blocks/retail-checkout

Code

Generate with one commandRun at the project root. The CLI writes the Block and required component source recursively.

Usage examplesrc/components/blocks/retail-checkout.vue

<script setup lang="ts">
import RetailCheckout from '@/components/blocks/retail-checkout.vue'

const address = {}
const items = []
const total = 0
function submitOrder() {}
</script>

<template>
  <RetailCheckout :address="address" :items="items" :total="total" @submit="submitOrder" />
</template>

Weapp DevTools Verified2026-08-28

retail-order-list

Retail Order List

retail

Order status, product summaries, and fulfillment actions.

Weapppnpm dlx @varo-ui/cli add --target weapp blocks/retail-order-list

Code

Generate with one commandRun at the project root. The CLI writes the Block and required component source recursively.

Usage examplesrc/components/blocks/retail-order-list.vue

<script setup lang="ts">
import RetailOrderList from '@/components/blocks/retail-order-list.vue'

const orders = []
function handleOrder(order: unknown) {
  console.log(order)
}
</script>

<template>
  <RetailOrderList :orders="orders" @action="handleOrder" />
</template>

Weapp DevTools Verified2026-08-28

retail-profile

Retail Profile

retail

Membership, orders, addresses, coupons, and service entry.

Weapppnpm dlx @varo-ui/cli add --target weapp blocks/retail-profile

Code

Generate with one commandRun at the project root. The CLI writes the Block and required component source recursively.

Usage examplesrc/components/blocks/retail-profile.vue

<script setup lang="ts">
import RetailProfile from '@/components/blocks/retail-profile.vue'

const orderCounts = {}
</script>

<template>
  <RetailProfile name="Varo User" :points="2680" :order-counts="orderCounts" />
</template>

Evidence and Implementation Boundaries

• H5 Live: real browser components and interactions on this page
• Weapp Contract Preview: a browser-rendered target contract, not the WeChat runtime
• Weapp DevTools Verified: DevTools evidence from a compiled mini-program page
• weapp-vite owns component JSON, complex list keys, generated types, and target output; wevu is the runtime peer for @varo-ui/weapp
• weapp-tailwindcss translates classes in the build chain; native hover-class provides mini-program pressed feedback

Continue

• Installation
• Build Your Own Block
• Button Docs
• Theme