shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Show that a product has more than one seller with this marketplace product card for React with React Aria. A hairline frame with a plus mark on each corner holds one tile: the drawn greyscale apron with its name, read-only Rating stars and the price of the chosen offer. In a side cell with a divider, the buy box says "Sold by Marlene K., ships in 2 days" and has the block's one Shine Button, "Add to bag", which turns into "Added" with an Undo. Under it a Collapsible lists four offers as Radio Group rows with a two-letter plate, the seller, delivery and price. Each seller has a "Details" Hover Card with the response time, years selling and orders. Choosing an offer re-prices the tile and rewrites the sold-by line, and buyer protection is typed text. The sellers and figures are typed. Nothing is stored or bought. Guides rule the bands. For marketplaces where one listing has several sellers.
FAQ
How do I change the sellers and offers?
Edit OFFERS. Each has an id, the seller, a two-letter plate, the price in cents, the days to ship, a rating in tenths and the typed reply, years and orders that the hover card shows. The first offer is the default. Prices go through one money helper.
Why does choosing a seller clear the bag?
Because the bag holds one offer, from one seller at one price. Picking a different seller takes the apron out so the "Added" state never describes an offer the shopper changed, and the status line says so. Press Add again for the new offer.
How do the seller details open?
On hover, on keyboard focus and on touch, from a small "Details" button beside each offer. The details are also kept out of the radio row itself, so choosing an offer never opens a card by accident.
What stays local, and how do I wire it for real?
The chosen offer and the bag are page state; nothing is stored, charged or sent, and buyer protection is typed text. Replace the body of add and undo with calls to your cart, and load OFFERS and the seller details from your marketplace. The picture is typed shapes: swap Picture for an img.
How does it look on a phone?
The tile and the buy box stack, the picture is shortened, and the offers open under the Add button. The sold-by line holds two lines of height, so choosing a seller never moves the button.
Is it accessible?
The offers are a named radio group that works with the arrow keys, and each row is named by the seller, rating, delivery and price. The Details button names its seller. The plates are decorative, the open or closed state of the list is announced, and every change is announced by the polite status line.
