Mini-program Business Blocks

This page is not a crowded gallery. It collects reusable business blocks with real mobile needs, component dependencies, H5 source, and mini-program source. Copy a block, replace fields, APIs, and local styles, then promote it inside your product codebase.

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 BlocksPreviews are captured from the running Weapp surface

WeappH5

login-form

Login Form

business

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

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

View code and usageExpand

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>

WeappH5

profile-card

Profile Card

business

Avatar, identity status, statistics, and edit action.

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

View code and usageExpand

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>

WeappH5

profile-edit

Profile Edit

business

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

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

View code and usageExpand

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>

WeappH5

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

View code and usageExpand

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>

WeappH5

order-filter

Order Filter

business

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

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

View code and usageExpand

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>

WeappH5

agent-chat

Agent Chat

agent

Incremental Markdown, tool state, approvals, and composer.

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

View code and usageExpand

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

retail-home

Retail Home

retail

Search, categories, featured products, and cart entry.

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

View code and usageExpand

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

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

View code and usageExpand

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

retail-cart

Retail Cart

retail

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

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

View code and usageExpand

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

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

View code and usageExpand

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

retail-checkout

Retail Checkout

retail

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

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

View code and usageExpand

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

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

View code and usageExpand

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

retail-profile

Retail Profile

retail

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

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

View code and usageExpand

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>

Mini-program Build Chain

• weapp-vite handles mini-program builds, component JSON, complex list keys, and generated types
• wevu is the mini-program runtime peer for @varo-ui/weapp; @varo-ui/headless does not bind Vue or Wevu
• weapp-tailwindcss plugs into the weapp-vite chain for class translation; current mini-program output removes unsupported interaction pseudo-classes, so components use native hover-class for pressed feedback
• For internal design systems, build upward from @varo-ui/headless, then promote blocks into business templates

Related Docs

• Button Docs
• Input Docs
• Dialog Docs
• Color System
• Theme