LiveProductCard
live-product-cardShows live-commerce products with pricing, stock, sales, active state, and purchase action.
Usage
Basic usage
List row layout (default row): serial number link + thumbnail + title + price + snap-up button.
Winter thickened sherpa jacket, same style for men and women, exclusive for live broadcast
¥129
tsx
<LiveProductCard
index={1}
image={url}
title="Winter thickened sherpa jacket, same style for men and women, exclusive for live broadcast"
price={129}
action={<button>Go to buy</button>}
/>Crossed price + corner mark + sales volume
originalPrice rendering with crossed out original price; tag corner mark; sold/stock rendering sold and remaining.
Flash Sale
Winter thickened sherpa jacket, same style for men and women, exclusive for live broadcast
¥129¥399
Sold 1240 · 86 left
tsx
<LiveProductCard
index={1}
image={url}
title="Winter thickened sherpa jacket"
price={129}
originalPrice={399}
tag="Flash Sale"
stock={86}
sold={1240}
action={<button>Go to buy</button>}
/>Explaining
explaining Renders a pulse "Explaining" logo at the bottom of the thumbnail to mark the product the anchor is talking about.
Portable thermos cup 316 stainless steel 500ml
¥49.90¥99
Sold 3580
tsx
<LiveProductCard
index={2}
image={url}
title="Portable thermos cup 316 stainless steel 500ml"
price={49.9}
originalPrice={99}
explaining
sold={3580}
action={<button>Go to buy</button>}
/>Grid Card
layout="card" Cut the card vertically, and the thumbnails occupy the entire row, suitable for the product display window grid.
Limited edition
Wireless Bluetooth Headset Noise Canceling Version
¥199¥499
Sold 920
Desktop ambient light RGB smart
¥69¥159
Sold 460
tsx
<div className="grid grid-cols-2 gap-2">
<LiveProductCard layout="card" index={3} image={url} title="Wireless Bluetooth Headset Noise Canceling Version" price={199} originalPrice={499} tag="Limited Edition" sold={920} action={<button>Go and buy</button>} />
<LiveProductCard layout="card" index={4} image={url} title="Desktop atmosphere light RGB Smart" price={69} originalPrice={159} explaining sold={460} action={<button>Go and buy</button>} />
</div>When to use
Use LiveProductCard for livestream commerce product lists or grids. Use [Card] for a generic container or PricingTable for comparison.
Import
ts
import { LiveProductCard } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| image* | string | — | Product image. |
| price* | number | — | Current price. |
| index | number | — | Numbered link badge. |
| originalPrice | number | — | Struck original price. |
| explaining | boolean | — | Active-explanation pulse. |
| stock | number | — | Remaining stock. |
| sold | number | — | Sold count. |
| currency | string | "¥" | Currency symbol. |
| layout | "row" | "card" | "row" | Control-panel row or storefront card. |
| className | string | — | Root class. |
Events
| Event | Type | Description |
|---|---|---|
| onClick | () => void | Card activation. |
Slots
| Slot | Type | Description |
|---|---|---|
| title* | ReactNode | Product title. |
| tag | ReactNode | Promotion tag. |
| action | ReactNode | Consumer-owned purchase action. |
Usage notes
- Action is a slot so the caller owns checkout behavior.
- Original price renders only when supplied; currency applies to both prices.
- Built-in presentation, sold-count, and remaining-stock labels follow
ConfigProvider locale;enUSprovides “Presenting”, “Sold N”, and “N left”, while the no-provider fallback remains Chinese.
Related
Sparkline · ImageViewer · DiffStat · ScoreRing · Badge · Dot