Five storefront pieces — swatch card, quick-add card, bag row, bundle deal and compact ranked list — with recolouring products, rolling quantities and rows that glide to a new sort.
Classic
classic.tsxProduct card whose drawn item recolours as you pick a swatch, with a popping wishlist heart and Add to bag that confirms.
| Prop | Type | Default | Description |
|---|---|---|---|
name / description / price | string | — | Product content. |
compareAt / saveLabel | string | — | Struck-through price and the money tag. |
rating / reviews | number | — | Average rating and review count. |
colors / defaultColor | ProductColor[] / string | — | { name, hex } swatches and the initial one. |
defaultWishlisted / onWishlistChange | boolean / (w: boolean) => void | — | Wishlist state. |
onAddToBag | (color: ProductColor) => void | — | Called by Add to bag. |
className | string | — | Extra classes on the root element. |
Quick add
quick-add.tsxCard whose size picker slides up over the image on hover, focus or tap, adds in one click and confirms in place.
| Prop | Type | Default | Description |
|---|---|---|---|
name / detail / price | string | — | Product content. |
tone | string | "#8a7f6c" | Hex used to draw the garment. |
sizes | SizeOption[] | — | { label, inStock? } per size; sold-out sizes are disabled. |
defaultOpen | boolean | false | Start with the size panel open. |
onAdd | (size: string) => void | — | Called with the chosen size. |
className | string | — | Extra classes on the root element. |
Bag row
list-row.tsxBag row with a quantity stepper whose number rolls, a following line total, a low-stock warning and remove with undo.
| Prop | Type | Default | Description |
|---|---|---|---|
name / variant | string | — | Item name and variant line. |
unitPrice / currency | number / string | — | Price per unit and ISO currency. |
defaultQuantity / stock | number | — | Initial quantity and the stepper cap. |
tone / shape | string / "vessel" | "box" | — | Thumbnail colour and drawing. |
onQuantityChange / onRemove / onUndo | (q: number) => void / () => void | — | Row handlers. |
className | string | — | Extra classes on the root element. |
Bundle deal
bundle-deal.tsxBundle card where toggling items recounts the price and savings under a live countdown with rolling digits.
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | "Weekend brew bundle" | Card heading. |
items | BundleItem[] | — | { id, name, price, art } per item. |
tiers | Record<number, number> | { 2: 10, 3: 20 } | Discount percent by number of items picked. |
endsIn | number | — | Seconds until the deal ends. |
currency | string | "USD" | ISO currency for formatting. |
onAdd | (ids: string[], total: number) => void | — | Called by the add button. |
className | string | — | Extra classes on the root element. |
Compact list
compact-list.tsxRanked list of four products whose rows glide to their new order when the sort changes, each with an add toggle.
| Prop | Type | Default | Description |
|---|---|---|---|
heading | string | "Trending this week" | List title. |
products | CompactProduct[] | — | { id, name, maker, price, rating, sold, tone } per row. |
defaultSort | "popular" | "price" | "rating" | "popular" | Initial order. |
currency | string | "USD" | ISO currency for formatting. |
onAdd | (product: CompactProduct, added: boolean) => void | — | Called when a row is added or removed. |
className | string | — | Extra classes on the root element. |
Install the whole set
Installs every product cards variant at once. Each section above has its own command for a single variant.
Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.
Accessibility
- Swatches and sorts are labelled radio and pressed-button groups with arrow keys and visible focus.
- Quantity, add and remove actions are real buttons with item names in their labels; stock and savings are stated in words.
- Recolours, rolling numbers and reorders run without spatial motion when reduced motion is on.