Skip to content
UI Kit
Accent color

Multi vendor marketplace pages

A seller in a marketplace. The store page with tabs, the seller in the buy box, all offers side by side and a message to the seller.

4 variants
Switch category

Every seller with a face

In a marketplace buyers trust the seller as much as the product. The pages here show who sells, how they are rated and what they promise, from the seller's own page to the buy box and the first question.

The category starts with Vendor store and its four views. The storefront is the seller's own page with products, story and reviews. The seller in the buy box brings the seller onto every product page and lets other offers fold out below. All offers compares the sellers of one product by total with shipping, delivery and rating, and the message form opens the first conversation with quick answers in front.

Sort offers by the total with shipping by default, that is the number buyers compare. Show the seller's rating and delivery time next to the price, they weigh as much as the price itself. Start with the storefront and the buy box, all offers becomes worth it once several sellers carry the same product.

Vendor store

StorefrontNew in 1.2

A cover with the monogram overlapping, figures in a hairline grid and a follow button that counts. Tabs with arrow keys switch between products with search, chips and sort, the story with policies and the reviews.

Seller in the buy boxNew in 1.2

The buy box names who sells and ships, with rating and a link to the store. Other offers fold out below, picking one swaps price, delivery and seller in place.

All offersNew in 1.2

Every offer for one product, sorted by total with shipping, by delivery or by seller rating, filtered by condition. A table on desktop, cards on phones, the best total marked.

Message the sellerNew in 1.2

Quick answers come first, the form after. Topic, an optional order number checked for its format and a message with a counter, each with its own error. Sent turns into a clear confirmation.

Details

What Vendor store brings along, read from the registry and the source.

Area
E-Commerce
Variants
4
Version
1.0.0 · since 1.2.0
File
components/ui/vendor-store.tsx
Brings along
utilskitbuttoniconproduct-imageinput
npm packages
None
Languages
English and German, 69 texts of its own
Studio
Adjust in code
Build with AI
Over MCP in Claude, Cursor, Copilot and Codex

Props

The VendorStoreProps interface from components/ui/vendor-store.tsx, with the comments from the code.

  • variantoptional
    VendorStoreVariant

    storefrontseller-cardofferscontact

  • vendoroptional
    Vendor
  • productsoptional
    VendorProduct[]
  • reviewsoptional
    VendorReview[]
  • productoptional
    { name: string; image?: React.ReactNode; subtitle?: string }

    seller-card and offers: the product and its offers

  • offersoptional
    Offer[]
  • faqoptional
    { q: string; a: string }[]

    contact: quick answers before writing and the topics to pick

  • topicsoptional
    string[]
  • onSendoptional
    (data: { topic: string; order?: string; message: string }) => Promise<void> | void
  • onAddoptional
    (item: VendorProduct | Offer) => void
  • currencyoptional
    string

Built-in texts

Vendor store writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 69 texts
followEnglish FollowGerman Folgen
followingEnglish FollowingGerman Gefolgt
followersEnglish FollowersGerman Follower
ratingEnglish RatingGerman Bewertung
reviewsEnglish ReviewsGerman Bewertungen
responseEnglish RepliesGerman Antwort
sinceEnglish Seller since {year}German Händler seit {year}
tabsEnglish Store sectionsGerman Bereiche des Shops
productsEnglish ProductsGerman Produkte
aboutEnglish AboutGerman Über uns
reviewsTabEnglish ReviewsGerman Bewertungen
searchEnglish Search this storeGerman In diesem Shop suchen
allEnglish AllGerman Alle
sortEnglish SortGerman Sortieren
sortPopularEnglish Most popularGerman Beliebteste
sortLowEnglish Price, low to highGerman Preis aufsteigend
sortHighEnglish Price, high to lowGerman Preis absteigend
noResultsEnglish Nothing in this store matches "{q}". Try a shorter word.German Zu „{q}“ gibt es in diesem Shop nichts. Versuch ein kürzeres Wort.
countEnglish {n} productsGerman {n} Produkte
addEnglish AddGerman Dazu
addedEnglish AddedGerman Drin
addNamedEnglish Add {name} to cartGerman {name} in den Warenkorb
messageEnglish MessageGerman Nachricht
visitEnglish Visit storeGerman Zum Shop
soldByEnglish Sold and shipped byGerman Verkauf und Versand durch
otherOffersEnglish {n} more offers from {price}German {n} weitere Angebote ab {price}
hideOffersEnglish Hide other offersGerman Weitere Angebote ausblenden
shippingEnglish ShippingGerman Versand
freeShippingEnglish Free shippingGerman Gratisversand
plusShippingEnglish + {amount} shippingGerman + {amount} Versand
arrivesEnglish Arrives {date}German Ankunft {date}
addToCartEnglish Add to cartGerman In den Warenkorb
inCartEnglish In the cartGerman Im Warenkorb
leftEnglish Only {n} leftGerman Nur noch {n}
offersTitleEnglish {n} offers for this productGerman {n} Angebote für dieses Produkt
sortByEnglish Sort byGerman Sortieren nach
byTotalEnglish Total priceGerman Gesamtpreis
byDeliveryEnglish Fastest deliveryGerman Schnellste Lieferung
byRatingEnglish Best seller ratingGerman Beste Händlerbewertung
conditionEnglish ConditionGerman Zustand
newEnglish NewGerman Neu
like-newEnglish Like newGerman Wie neu
usedEnglish UsedGerman Gebraucht
totalEnglish TotalGerman Gesamt
sellerEnglish SellerGerman Händler
deliveryEnglish DeliveryGerman Lieferung
priceEnglish PriceGerman Preis
bestEnglish Best totalGerman Bester Gesamtpreis
anyConditionEnglish Any conditionGerman Jeder Zustand
contactTitleEnglish Message {name}German Nachricht an {name}
contactTextEnglish Most questions are answered below. Still unsure? The seller usually replies {time}.German Die meisten Fragen sind unten beantwortet. Noch unsicher? Der Händler antwortet meist {time}.
quickEnglish Quick answersGerman Schnelle Antworten
topicEnglish What is it about?German Worum geht es?
chooseTopicEnglish Choose a topicGerman Thema wählen
orderEnglish Order numberGerman Bestellnummer
optionalEnglish optionalGerman optional
orderHintEnglish e.g. NH-48210, helps with questions about a deliveryGerman z. B. NH-48210, hilft bei Fragen zu einer Lieferung
yourMessageEnglish Your messageGerman Deine Nachricht
sendEnglish Send messageGerman Nachricht senden
sendingEnglish SendingGerman Wird gesendet
sentEnglish Message sentGerman Nachricht gesendet
sentTextEnglish {name} usually replies {time}. You get the answer by email and in your account.German {name} antwortet meist {time}. Die Antwort kommt per E-Mail und in dein Konto.
anotherEnglish Write another messageGerman Weitere Nachricht schreiben
eTopicEnglish Choose what your message is about.German Wähl, worum es in deiner Nachricht geht.
eOrderEnglish Order numbers look like NH-48210. Leave the field empty if you have none.German Bestellnummern sehen aus wie NH-48210. Lass das Feld leer, wenn du keine hast.
eShortEnglish Write a little more, at least {n} characters, so the seller can help right away.German Schreib noch etwas mehr, mindestens {n} Zeichen, damit der Händler gleich helfen kann.
charsEnglish {n} of {max}German {n} von {max}
policiesEnglish Store policiesGerman Regeln des Shops
verifiedEnglish Verified sellerGerman Geprüfter Händler

Accessibility

Read from the source of the component.

  • Vendor store handles the keys Arrow left, Arrow right, Home, End and Space itself.
  • Sets aria-controls, aria-describedby, aria-expanded, aria-invalid, aria-label, aria-labelledby, aria-live, aria-pressed and aria-selected, so screen readers announce purpose and state.
  • Uses the roles group, status, tab, tablist and tabpanel.
  • Announces changes through a live region without moving focus.
  • Every field has a label, visible or for screen readers.
  • Adds text for screen readers where icons and graphics stand alone.
  • Shows a visible focus ring when used with the keyboard.
  • The server renders the starting state in full, JavaScript only adds the interaction.

Motion

  • Brings animations of its own, calmly timed and without wobble.
  • With reduced motion (prefers-reduced-motion) it stays still. 5 places in the code switch motion off then.

Frequent questions

How do I install Vendor store?

With aiw add @ai-website/vendor-store. The command puts components/ui/vendor-store.tsx into your project, the code is yours from then on. It brings along button, icon, product-image and input. It needs no further npm packages.

Which variants does Vendor store have?

4 variants, Storefront, Seller in the buy box, All offers and Message the seller. You pick one with the variant prop, for example variant="seller-card".

Can I translate the texts of Vendor store?

Yes. Vendor store carries 69 texts of its own in English and German, such as “Follow”, “Following” and “Followers”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Vendor store?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Vendor store with aiw_components and install it with aiw_add @ai-website/vendor-store. Name the variant in your prompt, for example variant="storefront", and the assistant writes your content straight into the props.

Similar components

More from E-Commerce, the same area of the kit.

Often combined with

Sections that usually sit next to Marketplace on a page.

Often searched

Jump to

Copied to the clipboard