shadcn.io is not affiliated with official shadcn/ui
Marketplace Multi Seller Checkout Block for Ark UI
A basket split into three sellers, each band with its lines, its own shipping select (Standard, Tracked or Collect with arrival dates), a Returns fold with that seller's policy, and a total that adds the items and three shipping lines for one payment.
Installation
Overview
Check out a basket that comes from several makers, with this marketplace checkout for React with Ark UI. A compact header from Plover and Pine, a marketplace for handmade goods, holds the title and one sentence. Inside a hairline frame with a plus mark on each corner, a band per seller shows a two-letter tile, the seller's name, where it ships from and how many days it needs before it can post, then its lines with quantities and prices. Each band has its own shipping Native Select: Standard, Tracked, or Collect where the seller offers it, each option with its price and an arrival date counted in weekdays from the seller's ready date. A Returns Collapsible holds that seller's policy in two lines. Choosing a method re-prices its band and the total; a polite line says which seller changed and the new total. A summary lists the items and one shipping line per seller, "3 sellers, one payment", and Continue to payment, with the total in its label, is the only Shine Button. It's built from Collapsible, Native Select, Shine Button and Guides, with a CSS entrance only. For marketplaces, multi-vendor shops and dropship baskets.
FAQ
How do I feed it my own sellers and lines?
Edit SELLERS at the top. A seller has a name, a two-letter mark, where it ships from, the weekdays it needs to get an order ready (ready), whether it offers Collect, its returns lines and its lines (name, quantity and a price in whole cents). Items, shipping lines, band totals and the grand total are worked out from those, so nothing is typed twice.
How does each seller get its own shipping?
The choices are held per seller, so changing one select re-prices only its band. A seller that does not offer Collect keeps the option in the list, disabled, with the reason in its text. The summary shows one shipping line per seller and the total adds them all; the status line names the seller and the new total.
How are the arrival dates worked out?
From a fixed date in the file by counting weekdays: the seller's days to get the order ready, plus the method's days in the post. Collect shows when the order is ready. Because the dates are counted, not read from the clock, the same words appear on every load. In your app use each seller's own cut-off and its carrier's dates.
How do the Returns folds work from the keyboard?
Each Returns trigger is a button: Tab to it and press Enter or Space. The fold opens in place, its chevron turns, and its content leaves the tab order while it is closed. Each trigger is named for its seller ("Returns for Ceramics studio").
How does it look on a phone?
Every band keeps its select under its lines with the band total under that, and the Returns fold below. The summary and the pinned foot show the one total, and the foot settles at the end of the panel from the medium breakpoint.
What stays local, and how do I wire it up?
Everything: nothing is split, ordered or charged, and Continue to payment only says that payment comes next. In your app group the cart by seller on the server, read each seller's shipping methods and returns from its settings, and create one payment with a transfer per seller when it is confirmed.