Marketplace Home Page React block for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Marketplace Home Page is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import MarketplaceHomePage from @/components/blocks/marketplace-home-page.

// app/(market)/page.tsx (the shell lives in app/(market)/layout.tsx)
"use client"

import { useRouter } from "next/navigation"
import { MarketplaceHomePage } from "@/components/blocks/marketplace-home-page"

export default function HomePage() {
  const router = useRouter()
  return (
    <MarketplaceHomePage
      defaultLocation="cluj-napoca"
      onSearch={({ query, location }) => router.push(`/search?q=${encodeURIComponent(query)}&loc=${location}`)}
      onFavoriteChange={(id, favorite) => fetch(`/api/favorites/${id}`, { method: favorite ? "PUT" : "DELETE" })}
    />
  )
}

Props

• categories
  MarketplaceHomeCategory[]

  The category tiles (MARKETPLACE_HOME_SAMPLE.categories: the 12 Northwind Market categories with lucide icons and counts). Each links to /search?cat=<id> unless it has its own href.

• promoted
  ListingData[]

  The promoted rail (MARKETPLACE_HOME_SAMPLE.promoted: l02, l04 and six generated promoted ads). Empty hides the section.

• recent
  ListingData[]

  The newest listings, newest first (MARKETPLACE_HOME_SAMPLE.recent: l01 to l08 plus 16 generated, mostly in Cluj-Napoca). The grid keeps the listings whose location starts with the chosen city.

• popularSearches
  string[]

  The quick searches under the hero search (MARKETPLACE_HOME_SAMPLE.popularSearches: iPhone 14, Bike, 2-bedroom apartment...).

• stats
  { listings: number; sellers: number; cities: number }

  The hero subline (MARKETPLACE_HOME_SAMPLE.stats: 1,284,310 listings in 3,180 towns and villages), through labels.stats.

• location
  string

  The chosen city, a ro-locations id; controlled with onLocationChange. "" is every location, an unknown id reads as All locations.

• defaultLocationdefault "cluj-napoca"
  string

  The starting city of the recent section and the hero search while uncontrolled.

• onLocationChange
  (location: string) => void

  Every city change, from the hero field, the chip or the empty state.

• onSearch
  (query: { query: string; location: string; category: string }) => void

  The hero search. Default: navigates to /search?q=…&loc=… through the link provider's navigate.

• heroVariantdefault "panel"
  "panel" | "plain"

  panel: a tinted rounded hero with a photo mosaic from 768px (flat on phones); plain: the hero sits on the page background.

• showPromoteddefault true
  boolean

  The promoted rail.

• showRecentdefault true
  boolean

  The new ads grid with the city chip.

• showTrustdefault true
  boolean

  The three trust tiles.

• showAppdefault true
  boolean

  The app band with the store buttons and the QR code.

• recentCountdefault 12
  number

  Ads in the recent grid (fewer when the city has fewer).

• cardSizedefault "md"
  "sm" | "md"

  Listing card size from 640px; phones always use the compact look in two columns.

• onFavoriteChange
  (id: string, favorite: boolean) => (void | Promise<unknown>)

  A heart was toggled. The change shows at once in the rail and the grid; a rejected promise rolls it back and the card announces the error.

• appUrldefault "https://northwind.market/app"
  string

  The QR code's value in the app band.

• appStoreHrefdefault "#app-store"
  string

  The App Store button's link.

• googlePlayHrefdefault "#google-play"
  string

  The Google Play button's link.

• categoriesHrefdefault "/categories"
  string

  Where All categories points.

• deliveryFromdefault 9.99
  number

  The lowest courier price in the Courier delivery tile, in currency.

• labels
  Partial<MarketplaceHomePageLabels>

  Every visible string (DEFAULT_MARKETPLACE_HOME_PAGE_LABELS, English), counted ones as functions; nested listingCard, carousel, categoryPicker, searchInput, listbox and qrCode labels for the composed items. MARKETPLACE_HOME_PAGE_LABELS_EN is the same set under its older name.

• localedefault "en-US"
  string

  Intl locale for the counts, prices and dates.

• currencydefault "USD"
  string

  The currency of listings without their own, and of deliveryFrom.

• now
  Date | number

  The clock for the relative dates on the cards. Default: useNow() (a stable placeholder while hydrating); the demo passes MARKETPLACE_HOME_NOW.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  The search button, the hero glow, the selected place, the hearts and the trust icons.

• radiusdefault "md"
  "sm" | "md" | "lg"

  The surfaces: cards and tiles 12 / 16 / 24px, the hero and the app band 16 / 24 / 32px.

• loadingdefault false
  boolean

  The hero stays; the category tiles, the promoted rail and the grid become skeletons of their real shape.

• animateIndefault true
  boolean

  Sections rise in once when the page mounts on the client (never over server HTML, never with reduced motion).

• linkComponent
  (props: LinkComponentProps) => ReactNode

  The router link for every link on the page. Default: the provider's (the shell's), then <a>.

• className
  string

  Classes for the root.

• classNames
  Partial<Record<"hero" | "search" | "categories" | "promoted" | "recent" | "grid" | "trust" | "app", string>>

  Classes for the sections.

Parts

FAQ

More React blocks