React e-commerce components for Tailwind CSS
Commerce components cover the path from browsing to paying in shops and marketplaces. Listing Card and Listing Grid show results with swipeable photos, prices and favorites, while Filter Panel, Price Range (a histogram over a two thumb slider) and Category Picker narrow them down. On the product page, Product Gallery zooms under the mouse, Price writes amounts the way a shop does, with old prices and discounts, Reviews shows the average with a breakdown that filters, and Seller Card shows who you are buying from. Cart Drawer, Quantity Stepper, Coupon Input and Checkout Steps take the order from the cart to the review step, and Order Tracker follows it to the door.
All Commerce[16]
Listing card
The ad card of a marketplace: swipeable photos, the price, place and time, badges and a heart, in grid, list and compact layouts.
Product gallery
The photo gallery of a detail page: a swipeable stage that zooms under the mouse, thumbnails and a full-screen viewer.
Favorite button
The heart that saves a listing: fills with a spring pop and a burst, keeps a count, saves optimistically and rolls back on failure.
Order tracker
Where an order is: number, status, arrival window, milestones, a route with the courier, the tracking number, the shipment history and the total.
Checkout steps
A four step checkout: address and invoice, delivery with lockers, payment, then a review that places the order, beside a sticky summary.
Cart drawer
The shop cart: a side panel on desktop and a bottom sheet on phones, with lines, undo, free delivery progress, a promo code and the totals.
Listing grid
The body of a results page: count, sort, view switch and filter chips over a listing grid that loads more as you scroll.
Pricing table
Plans side by side with a Monthly / Yearly switch whose prices roll, a featured plan, feature lists and a full comparison table.
Reviews
Product and seller reviews: the average, stars and a 5 to 1 breakdown that filters, then sortable reviews with photos, replies and votes.
Seller card
Who you are buying from: avatar, verified mark, stars, reply speed, a phone number you reveal, message, follow and more listings.
Quantity stepper
The minus, value, plus control of carts and product pages, with stock hints, hold to repeat, rolling digits and an Add to cart morph.
Price
A price written the way a shop writes it: a smaller currency, a struck old price with its discount chip, Negotiable, Free and Swap.
Coupon input
The promo code field of carts and checkouts: a link that opens it, Apply inside the box, async checks and applied codes as chips.
Category picker
Browse and pick a category from a tree: icon tiles, drill-down rows with a back button, counts, search across levels and a field.
About Commerce
Favorite Button and Pricing Table, with a monthly and yearly switch, complete the category. Phones get their own layouts: the cart is a bottom sheet, filters open in a full-height sheet with a live result count, sort menus become bottom sheets, and the checkout summary folds into a bar at the top. Money is formatted per locale through the Commerce helpers in Hooks & Utilities. All 16 commerce components are part of Pro. Their docs, props and live previews are open to everyone.