veding-ui README

The project's README from github.com/AileeSung/veding-ui. As one markdown file: README.md.

Veding UI — WeChat Mini Program O2O Component Library

License Version Platform

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

📦 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

# 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:

  1. 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
  2. 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
  3. 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

🤝 Contributing

Issues and PRs are welcome! Please ensure:

  1. Components remain zero-dependency (pure WeChat Custom Components)
  2. New components include demo page examples
  3. Consistent code style (2-space indentation, English comments)

📄 License

MIT © 2026 Veding UI Contributors

🙏 Acknowledgments

veding-ui (AileeSung/veding-ui)

Searching Database…

139 ·GitHub
Veding-ui
What is this?Veding UI is a native WeChat Mini Program component library built specifically for food delivery, e-commerce, and local life (O2O) apps, offering ready-made pieces like food cards, order status, address pickers, and delivery tracking.
Is this a generic UI kit like Vant or TDesign?No, it's a vertical-specific library: it skips generic buttons/inputs and focuses on O2O transaction UI (SKU selectors, coupons, delivery tracking) that generic libraries don't cover.
How do I add these components to my mini program?Copy the components/ folder directly into your project and register the components in your page's index.json, or open the repo root in WeChat DevTools to try the demo project first.
Do I need any build tools or npm packages to use it?No, it requires no build tools and has zero dependencies — just open it directly in WeChat DevTools.
Is it published as an npm package I can install?Not yet — npm package distribution and a TypeScript migration are planned for v2.0, so for now you copy the component folders manually.
How many components does it ship with?22 core components covering the full O2O lifecycle, including food cards, store cards, orders, addresses, ratings, search, SKU selection, coupons, image upload, location picker, payment PIN, and delivery tracking.
Can the food and store cards change layout?Yes, cards support horizontal, vertical, and compact layout modes, and the Loading component supports both spinner and skeleton-screen styles.
Why did the Veding team build this instead of using Vant or TDesign?They found WeChat's native component ecosystem thin for O2O use cases — generic libraries like Vant and TDesign work for corporate sites but lack purpose-built pieces for transaction-heavy flows like real-time countdowns, SKU selection, and delivery tracking.
What's planned next for the library?v1.6 will add a coupon center, errand order card, and group-buy detail view; v2.0 plans a TypeScript migration, unit tests, and npm package distribution.
What are similar projects?vux, weui-wxss, puck, weui, vant-weapp, coloruicss, formily, expo-backdrop
Which topics is it in?e-commerce, no-code, wechat, component-library, ui-components, china, ui, gui, frontend, library, javascript, mit
Creator
AileeSung
Size
0.1 MB
Stars
139
Updated
CommitAug 19Releasev1.1.0Aug 20
Age
2mo
Commits · 90 Days