Veding UI — WeChat Mini Program O2O Component Library
Veding UI is a native WeChat Mini Program component library built for food delivery, e-commerce, errand running, and local life O2O scenarios.
Built by Veding, an O2O platform provider for food delivery, e-commerce, and local life services.
In real-world O2O development, we kept rewriting food cards, store listings, order status badges, and address pickers for every new project. Veding UI extracts battle-tested O2O components from years of production use, so developers can integrate them with 3 lines of JSON and focus on business logic instead of UI boilerplate.
✨ Features
- 🧩 22 Core Components — covering the full O2O lifecycle: food cards, store cards, orders, addresses, ratings, search, loading, empty states, countdowns, badges, cart bar, SKU selector, coupons, image upload, notice bar, tabs, location picker, payment PIN, stepper, collapse, group-buy card, and delivery tracking
- 🎨 Zero Dependencies — native WeChat Custom Components; copy
components/ and use immediately
- 📐 Multi-Mode — cards support horizontal/vertical/compact layouts; loading supports spinner and skeleton screens
- 🎯 Production-Proven — every component's props and events come from real O2O business iterations
- 📱 No Build Tools — open the project directly in WeChat DevTools
- 🌍 Bilingual-Friendly — clear, English prop names and event names
📦 Components
| Component |
Path |
Description |
| FoodCard |
components/food-card/ |
Food item card with image, name, price, tags, and add-to-cart button. Supports horizontal / vertical / compact layouts |
| StoreCard |
components/store-card/ |
Store card with logo, rating, monthly sales, delivery info, notice, and tags |
| OrderItem |
components/order-item/ |
Order list item with status badge, goods list, total price, and action buttons |
| AddressPicker |
components/address-picker/ |
Bottom-sheet address picker with select, edit, delete, and add address |
| RatingStar |
components/rating-star/ |
Star rating display (read-only) or interactive rating input with configurable size and color |
| SearchBar |
components/search-bar/ |
Search input bar with clear, cancel, and search events |
| Badge |
components/badge/ |
Badge/corner-mark: dot mode, count mode (99+), text mode, 4 color variants |
| Loading |
components/loading/ |
Loading states: animated spinner, card skeleton, list skeleton |
| EmptyState |
components/empty-state/ |
Empty placeholder with icon, title, description, and action button |
| Countdown |
components/countdown/ |
Countdown timer with auto-tick, timeout callback, 3 color themes |
| CartBar |
components/cart-bar/ |
NEW v1.1 — Fixed bottom cart bar with item count badge, price summary, delivery fee, and checkout button |
| SKUSelector |
components/sku-selector/ |
NEW v1.1 — Bottom-sheet SKU/spec selector: multi-group options (single/multi select), quantity stepper, price calculator |
| CouponCard |
components/coupon-card/ |
v1.1 — Coupon card with discount display ($/%, free shipping), min-order condition, expiry, status variants, 5 color themes |
| ImageUploader |
components/image-uploader/ |
NEW v1.2 — Image picker with preview, delete, max-count limit, and size validation |
| NoticeBar |
components/notice-bar/ |
NEW v1.2 — Announcement bar with horizontal marquee, vertical carousel, and static modes; 4 color themes |
| Tabs |
components/tabs/ |
v1.2 — Tab navigation with line/card/button styles, badge support, horizontal scrolling, and sticky positioning |
| LocationPicker |
components/location-picker/ |
NEW v1.3 — Bottom-sheet map location picker with draggable center pin, geolocation, and address bar |
| PayPassword |
components/pay-password/ |
NEW v1.3 — Payment PIN input with masked dots, blinking cursor, and auto-submit on completion |
| Stepper |
components/stepper/ |
NEW v1.3 — Quantity stepper with min/max/step, editable mode, and 3 sizes |
| Collapse |
components/collapse/ |
v1.3 — Collapsible panel with animated expand, arrow rotation, icon, and slot content |
| GroupBuyCard |
components/group-buy-card/ |
v1.4 — Group-buy card with progress bar, member avatars, countdown, and join button; 3 color themes |
| DeliveryTracking |
components/delivery-tracking/ |
NEW v1.5 — Order/delivery progress timeline with done/current/pending nodes, pulsing current step, and 3 color themes |
🚀 Quick Start
Option 1: Direct Copy (Recommended)
# Copy the components/ directory into your mini program project
cp -r veding-ui/components/ your-project/components/
Then register components in your page's index.json:
{
"usingComponents": {
"food-card": "/components/food-card/index",
"store-card": "/components/store-card/index",
"order-item": "/components/order-item/index",
"rating-star": "/components/rating-star/index",
"search-bar": "/components/search-bar/index",
"badge": "/components/badge/index",
"loading": "/components/loading/index",
"empty-state": "/components/empty-state/index",
"countdown": "/components/countdown/index",
"address-picker": "/components/address-picker/index",
"cart-bar": "/components/cart-bar/index",
"sku-selector": "/components/sku-selector/index",
"coupon-card": "/components/coupon-card/index",
"image-uploader": "/components/image-uploader/index",
"notice-bar": "/components/notice-bar/index",
"tabs": "/components/tabs/index",
"location-picker": "/components/location-picker/index",
"pay-password": "/components/pay-password/index",
"stepper": "/components/stepper/index",
"collapse": "/components/collapse/index",
"group-buy-card": "/components/group-buy-card/index",
"delivery-tracking": "/components/delivery-tracking/index"
}
}
Option 2: Demo Project
Open the project root in WeChat DevTools to explore all components with live examples.
📖 Usage Examples
FoodCard
<!-- Horizontal mode: for food lists -->
<food-card
name="Braised Pork Ribs Combo"
desc="Slow-braised ribs with signature sauce, served with rice and sides"
price="{{38}}"
originalPrice="{{58}}"
soldCount="{{1286}}"
tags="{{['Best Seller', 'Signature']}}"
mode="horizontal"
bindtap="onFoodTap"
bindaddtocart="onAddToCart"
/>
<!-- Vertical mode: for recommended items / waterfall grids -->
<food-card
name="Spicy Hot Pot"
price="{{58}}"
mode="vertical"
/>
OrderItem
<order-item
orderNo="20260811204530001"
storeName="Old Taste Kitchen"
status="delivering"
statusText="In Delivery"
totalPrice="{{38}}"
goodsList="{{[{name: 'Braised Ribs', price: 38, quantity: 1}]}}"
primaryAction="View Details"
secondaryAction="Remind"
bindtap="onOrderTap"
/>
Loading Skeleton
<!-- Card skeleton screen -->
<loading mode="card-skeleton" visible="{{loading}}" />
<!-- List skeleton screen (3 rows) -->
<loading mode="list-skeleton" rows="{{3}}" visible="{{loading}}" />
Countdown
<countdown seconds="{{1800}}" theme="urgent" bindtimeout="onTimeout" />
See the demo page and component source for more.
CartBar (v1.1)
<cart-bar
itemCount="{{2}}"
totalPrice="{{76}}"
minPrice="{{20}}"
deliveryFee="{{3}}"
empty="{{false}}"
buttonText="Checkout"
bindcarttap="onCartTap"
bindcheckout="onCheckout"
/>
SKUSelector (v1.1)
<sku-selector
show="{{showSku}}"
productName="Braised Pork Ribs Combo"
basePrice="{{38}}"
specGroups="{{demoSkuGroups}}"
quantity="{{1}}"
confirmText="Add to Cart"
bindclose="onSkuClose"
bindconfirm="onSkuConfirm"
/>
CouponCard (v1.1)
<coupon-card
type="amount"
value="{{5}}"
minOrder="{{30}}"
title="$5 Off Coupon"
desc="Valid on all food orders"
expireDate="2026-12-31"
status="available"
theme="red"
bindtap="onCouponTap"
/>
ImageUploader (v1.2)
<image-uploader
images="{{demoImages}}"
maxCount="{{6}}"
maxSize="{{10}}"
addText="Upload"
bindchange="onImageChange"
/>
NoticeBar (v1.2)
<!-- Vertical carousel -->
<notice-bar mode="vertical" list="{{demoNotices}}" theme="warning" closable />
<!-- Horizontal marquee -->
<notice-bar mode="scroll" text="Free delivery on orders over $50" theme="info" />
Tabs (v1.2)
<tabs
tabs="{{demoTabs}}"
active="{{activeTab}}"
type="line"
scrollable="{{true}}"
bindchange="onTabChange"
/>
Stepper (v1.3)
<stepper
value="{{quantity}}"
min="{{1}}"
max="{{99}}"
step="{{1}}"
size="medium"
bindchange="onStepperChange"
/>
Collapse (v1.3)
<collapse title="Store information & hours" icon="🏪" bindchange="onCollapseChange">
<text>Mon-Fri: 10:00 - 22:00 · Weekend: 09:00 - 23:00</text>
</collapse>
PayPassword (v1.3)
<pay-password
length="{{6}}"
masked="{{true}}"
bindcomplete="onPayComplete"
/>
LocationPicker (v1.3)
<location-picker
show="{{showLocation}}"
latitude="{{22.5431}}"
longitude="{{113.9344}}"
address="Innovation Tower, 88 Tech Park Road, Nanshan, Shenzhen"
title="Select Delivery Location"
bindclose="onLocationClose"
bindconfirm="onLocationConfirm"
bindlocate="onLocate"
/>
GroupBuyCard (v1.4)
<group-buy-card
title="BBQ Feast for 4 — Grilled Ribs, Wings & Sides"
image="{{group.image}}"
groupPrice="{{68}}"
originalPrice="{{128}}"
targetCount="{{4}}"
joinedCount="{{2}}"
avatars="{{group.avatars}}"
expireSeconds="{{7200}}"
theme="orange"
buttonText="Join Group"
bindtap="onGroupBuyTap"
bindjoin="onGroupBuyJoin"
/>
DeliveryTracking (v1.5)
<delivery-tracking
steps="{{order.tracking}}"
activeIndex="{{3}}"
theme="orange"
bindstep="onTrackingStep"
/>
Where steps is an array of { title, desc, time, status? }. status is 'done' | 'current' | 'pending'; omit it and pass activeIndex to derive the status automatically.
🎯 Why This Project Exists
As developers behind the Veding O2O platform serving thousands of merchants, we identified three gaps in the ecosystem:
- O2O mini programs share massive UI patterns — food cards, store cards, order status, address management — yet the community lacks native components purpose-built for these scenarios
- Existing UI libraries are too generic — they work for corporate sites but not for transaction-heavy scenarios like food ordering with real-time countdowns, SKU selections, and delivery tracking
- WeChat's native component ecosystem is thin — TDesign and Vant skew generic; there are no vertical O2O components
Veding UI aims to become the go-to component library for O2O mini program development on WeChat. v1.0 focused on food delivery cards and order management; v1.1 added cart, SKU selector, and coupons; v1.2 added image upload, notice bar, and tabs; v1.3 added location picker, payment PIN, stepper, and collapse; v1.4 added the group-buy card; v1.5 added delivery tracking. Future versions will expand into e-commerce, errand running, group buying, and more LBS-powered life-service scenarios.
🗺️ Roadmap
- v1.0 — Core cards & listings: food card, store card, order item, address picker, rating star, search bar, badge, loading, empty state, countdown ✅
- v1.1 — Shopping cart bar, SKU/spec selector, coupon card ✅
- v1.2 — Image uploader, notice bar, tabs ✅
- v1.3 — Map location picker, payment PIN input, quantity stepper, collapse ✅
- v1.4 — Group-buy card ✅
- v1.5 — Delivery tracking timeline ✅
- v1.6 — Coupon center, errand order card, group-buy detail
- v2.0 — TypeScript migration, unit test coverage, npm package distribution
🤝 Contributing
Issues and PRs are welcome! Please ensure:
- Components remain zero-dependency (pure WeChat Custom Components)
- New components include demo page examples
- Consistent code style (2-space indentation, English comments)
📄 License
MIT © 2026 Veding UI Contributors
🙏 Acknowledgments
- WeChat Mini Program official component documentation
- The Veding platform team for years of O2O product exploration
Veding UI 是一个专为外卖、电商和本地生活(O2O)应用打造的微信小程序原生组件库,提供美食卡片、订单状态、地址选择器、配送跟踪等现成组件。