Marketplace Search 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 Search 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 MarketplaceSearchPage from @/components/blocks/marketplace-search-page.

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

import { useRouter, useSearchParams } from "next/navigation"
import {
  MarketplaceSearchPage,
  type MarketplaceSearchState,
} from "@/components/blocks/marketplace-search-page"

export default function SearchPage() {
  const router = useRouter()
  const params = useSearchParams()
  const state: MarketplaceSearchState = {
    query: params.get("q") ?? "",
    category: params.get("cat") ?? "bikes",
    location: params.get("loc") ?? "cluj-napoca",
    filters: JSON.parse(params.get("f") ?? "{}"),
    sort: params.get("sort") ?? "newest",
    view: params.get("view") === "list" ? "list" : "grid",
  }
  return (
    <MarketplaceSearchPage
      state={state}
      onStateChange={(next) => {
        const query = new URLSearchParams({
          q: next.query,
          cat: next.category,
          loc: next.location,
          f: JSON.stringify(next.filters),
          sort: next.sort,
          view: next.view,
        })
        router.replace(`/search?${query}`, { scroll: false })
      }}
      onSaveSearch={(search, saved) => fetch("/api/saved-searches", { method: saved ? "POST" : "DELETE", body: JSON.stringify(search) })}
    />
  )
}

Props

• state
  MarketplaceSearchState

  The search, controlled with onStateChange: { query, category, location (a ro-locations city id, "" for the whole country), filters (FilterValues keyed by filter id), sort, view }. A real app writes it to the url.

• defaultState
  Partial<MarketplaceSearchState>

  The starting search while uncontrolled (DEFAULT_MARKETPLACE_SEARCH_STATE: Bikes in Cluj-Napoca, no filters, newest first, grid).

• onStateChange
  (state: MarketplaceSearchState) => void

  Every change: a filter, a chip, the sort, the view, the place.

• filters
  FilterDef[]

  The facets. Default: the sample set of the category (createSearchFilters): Price with a histogram, Condition, Location with a radius, Delivery available, Seller, Posted and Wheel size for bikes; Price, Rooms, Floor area, Location, Floor, Layout, Seller and Posted for apartments.

• items
  MarketplaceSearchListing[]

  The local ads the default search runs over (ListingData plus cityId, facets and keywords). Default: 480 generated ads of the category (getSampleListings, l01 included).

• search
  (state: MarketplaceSearchState, page: number) => (MarketplaceSearchResult | Promise<MarketplaceSearchResult>)

  Plug the server here: { items, total, promoted?, histogram?, counts? }. Page 0 replaces the results (skeletons while pending), later pages append. Default: searchListings over items during render, the next pages after 700ms.

• pageSizedefault 24
  number

  How many ads each page or Load more step adds, clamped to 6-96.

• defaultViewdefault "grid"
  "grid" | "list"

  The first view while the state names none.

• viewPersistKeydefault "northwind-market-search-view"
  string

  Remembers grid or list in localStorage while the state is uncontrolled; "" turns it off.

• columns
  ListingGridColumns

  Cards per row at the grid's own width (container queries). Default { base: 2, md: 3, xl: 3 }: two on phones, three beside the filters.

• showPromoteddefault true
  boolean

  Up to three promoted ads above the results.

• showRelateddefault true
  boolean

  The Related searches links under the results (from 1024px).

• relatedSearches
  string[]

  The related searches. Default: the category's sample (E-bike, MTB 29...).

• loadModedefault "auto"
  "auto" | "button"

  auto: the next page loads as the end nears (the button stays as a fallback); button: Show 24 more.

• filterModedefault "auto"
  "auto" | "sidebar" | "sheet"

  auto: a sticky sidebar from 1024px and a sheet below; sidebar: always beside the results (above them on phones); sheet: the Filtre button and a sheet at every width.

• filtersOpen
  boolean

  The filters sheet, controlled with onFiltersOpenChange.

• defaultFiltersOpendefault false
  boolean

  Opens the filters sheet on mount (where a sheet is used: below 1024px, or filterMode sheet).

• onFiltersOpenChange
  (open: boolean) => void

  The sheet opened or closed.

• savedSearch
  boolean

  The bell's state, controlled. Uncontrolled it belongs to one search and resets when the search changes.

• defaultSavedSearchdefault false
  boolean

  The first search starts saved (the bell is on).

• onSaveSearch
  (state: MarketplaceSearchState, saved: boolean) => (void | Promise<unknown>)

  The bell. A promise keeps it busy; resolved, a toast says Search saved; rejected, an error toast. Default: a simulated 600ms request.

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

  A heart was toggled; it shows at once and a rejected promise rolls it back.

• languagedefault "en"
  "ro" | "en"

  The sample content's language, kept for compatibility: the default listings, filter names, category names and related searches are English in both. Copy comes from labels.

• labels
  Partial<MarketplaceSearchPageLabels>

  Every visible string, English by default (DEFAULT_MARKETPLACE_SEARCH_PAGE_LABELS; MARKETPLACE_SEARCH_PAGE_LABELS_EN is the same set under its older name), with nested sets for the grid, the cards, the filter panel and the breadcrumb.

• localedefault "en-US"
  string

  Intl locale for the count, prices and dates.

• currencydefault "USD"
  string

  The default listings' prices (converted at fixed rates; USD, EUR or RON) and the price filter.

• now
  Date | number

  The clock for Today at 2:32 PM and Posted. Default: useNow() (the sample's Sep 24, 2026, 4:40 PM while hydrating); the demo passes the same.

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

  The filters' checks, chips, sliders and apply button, the filter count badge, the empty state action and the hearts.

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

  The listing cards and the empty state: 12 / 16 / 24px.

• loadingdefault false
  boolean

  The first page: the count and the grid as skeletons of their real shape.

• animateIndefault true
  boolean

  The title and the results rise in once when the page mounts on the client; new pages fade in (never over server HTML, never with reduced motion).

• linkComponent
  (props: LinkComponentProps) => ReactNode

  The router link for the breadcrumb, the cards and the related searches. Default: the provider's (the shell's), then <a>.

• className
  string

  Classes for the root.

• classNames
  Partial<Record<"top" | "title" | "count" | "body" | "filters" | "results" | "related" | "empty", string>>

  Classes for the parts.

Parts

FAQ

More React blocks