Add to Cart
Product row whose Add button presses itself, sends a dot arcing up to the cart icon, and bumps the badge count on every landing before the cart empties again.
Usage
The import and the props worth knowing about, in one place.
import { Commerce31 } from "@/components/beste/piece/commerce31";
<Commerce31
name="Blue Note Vinyl"
initials="BN"
price={34}
maxCount={3}
tone="violet"
/>More Commerce pieces
View all Commerce
Add to Cart
Mini cart-line card with product photo, name, variant, price, a minus/plus quantity stepper, and a tone-filled Add to cart button.
- Air Max 90Qty 1$129
- Field JacketQty 1$240
Cart Drawer
Mini cart panel with a count badge header, two item rows showing photo, name, quantity, and price, and a tone Checkout CTA next to the subtotal.
Bundle Picker
Frequently-bought-together row with product thumbnails joined by plus icons, a bundle total with a Save emerald chip, and a tone Add-items CTA.
Wishlist Save
Product row with a photo, name, price, and a pill Save button that fills with a rose heart and shows the total wishlist count when active.