4.1 KiB
Vibn Marketplace
A small extension to vibn-ai-templates for building two-sided marketplaces. Ships with a fully composed example brand — Atlas — and a set of marketplace-specific components.
What's in it
marketplace-tokens.css— A newtheme-atlas(warm-editorial, Airbnb school) plus marketplace-specific tokens (--listing-radius,--rating,--map-pin, etc.). Stacks on top of the basetokens.css.marketplace-components.jsx— Components you need for marketplace UX, none of which exist in the base library:- Listings ·
ListingCard,ListingCardHorizontal,PhotoGallery,PhotoSlot - Reviews & trust ·
RatingStars,ReviewCard,RatingsSummary,TrustBadge(verified, superhost, instant, top-rated, new) - Pricing ·
PriceTag,PriceBreakdown(receipt with discounts) - Host/profile ·
HostHeaderwith KPI strip - Messaging ·
MessageBubble - Search & discovery ·
SearchBar(destination + dates + guests),CategoryRail,FilterChips,AmenityChip - Map & calendar ·
MiniMap(stylized SVG with price pins),CalendarMonth,AvailabilityHeatmap - Dashboard ·
StatTile
- Listings ·
marketplace-shells.jsx— Two layout shells:MarketplaceTopShell— public-facing top nav with inline search, host-mode toggle, big footerMarketplaceDashboardShell— sidebar with Guest/Host segmented toggle (the canonical two-sided marketplace pattern)
Architecture
Marketplace components depend on the base library (vibn-ai-templates). Load order:
<link rel="stylesheet" href="vibn-ai-templates/tokens.css">
<link rel="stylesheet" href="vibn-marketplace/marketplace-tokens.css">
<script type="text/babel" src="vibn-ai-templates/icons.jsx"></script>
<script type="text/babel" src="vibn-ai-templates/components.jsx"></script>
<script type="text/babel" src="vibn-ai-templates/shells.jsx"></script>
<script type="text/babel" src="vibn-marketplace/marketplace-components.jsx"></script>
<script type="text/babel" src="vibn-marketplace/marketplace-shells.jsx"></script>
Wrap your app in class="theme-atlas" and you're done.
Atlas — the worked example
Atlas Marketplace Templates.html is a full 8-page sample marketplace using only these primitives. Pages cover the full lifecycle:
| # | Page | What it demonstrates |
|---|---|---|
| 01 | Home / discovery | Hero, inline search bar, category rail, featured grid, cities, how-it-works |
| 02 | Search + map | Split list/map layout, filter chips, sort, horizontal listing cards |
| 03 | Listing detail | Photo gallery, summary, amenities, dual-month calendar, ratings summary, reviews, host header, sticky booking card with price breakdown |
| 04 | Checkout | Payment, message-to-host, ground rules, sticky summary |
| 05 | Guest dashboard | Hero upcoming-trip card, past trips, wishlist |
| 06 | Messages | Inbox + thread + trip context card + composer |
| 07 | Host dashboard | KPI strip, earnings bar chart, upcoming check-ins, availability heatmap, recent reviews |
| 08 | New listing wizard | Step 3/6 — photos, title, description with live preview card |
What's still hand-written
atlas-pages.jsx is page-specific composition — these are templates, not reusable components. They show how to assemble the kit. Use them as starting points and rip out anything you don't need.
Marketplace adaptation
To pivot the kit to a different marketplace type:
- Services (Upwork/Fiverr) — Swap
PhotoGalleryfor a portfolio grid,PriceTagfor hourly-rate ranges,CalendarMonthfor availability slots. TheHostHeaderandMessageBubblework as-is. - Goods (Etsy) — Add a quantity/variant selector. The listing card is already photo-led; just adjust subtitle to surface seller name and shipping.
- On-demand (delivery, rides) — Drop the calendar; replace with a live map.
TrustBadgealready has variants you can rename. The dashboard shell is built for two-sided role switching.
The CSS variable approach means you can also restyle the marketplace to feel utilitarian (e.g. swap theme-atlas for theme-minimal or theme-dark) without changing a single component.