Listing Detail 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

Listing Detail 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 ListingDetailPage from @/components/blocks/listing-detail-page.

// app/(market)/listing/[slug]/page.tsx (the shell lives in app/(market)/layout.tsx; mount <Toaster /> once there)
"use client"

import { useRouter } from "next/navigation"
import { ListingDetailPage } from "@/components/blocks/listing-detail-page"

export default function ListingPage() {
  const router = useRouter()
  return (
    <ListingDetailPage
      onMessage={(text) => fetch("/api/messages", { method: "POST", body: JSON.stringify({ listing: "l01", text }) })}
      onRevealPhone={() => fetch("/api/listings/l01/phone").then((response) => response.text())}
      onFavoriteChange={(favorite) => fetch("/api/favorites/l01", { method: favorite ? "PUT" : "DELETE" })}
      onOpenConversation={() => router.push("/messages?listing=l01")}
    />
  )
}

Props

• listing
  ListingDetail

  The listing (LISTING_DETAIL_SAMPLE.listing: l01, Trek FX 2 city bike, $280 negotiable, Portland Pearl District). ListingData without attributes plus images (ProductGalleryImage[]), description (plain text, blank lines split paragraphs), attributes (DescriptionListItem[]), views, favorites, adId, place { city, area, point, radiusKm }, courier { name, price } and the breadcrumb path.

• seller
  SellerData

  The seller card (LISTING_DETAIL_SAMPLE.seller: Daniel Reed, 4.8 from 126 reviews, replies within an hour). Its name labels the contact buttons.

• sellerListings
  ListingData[]

  The seller's other listings in the seller card, up to three (LISTING_DETAIL_SAMPLE.sellerListings).

• similar
  ListingData[]

  The similar listings rail (LISTING_DETAIL_SAMPLE.similar, 8 listings around Portland). An empty array hides the section.

• favorite
  boolean

  Saved to favorites, controlled; pair with onFavoriteChange.

• defaultFavoritedefault false
  boolean

  Saved to favorites at first, uncontrolled.

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

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

• onMessage
  (text: string) => (void | Promise<unknown>)

  Sends the dialog's message. A promise drives the Send spinner; a rejection shows its message in the dialog. Default: a pretend 900 ms request.

• onRevealPhone
  () => (string | Promise<string>)

  Fetches the full number when Show phone or Call is pressed. Default: resolves "(503) 555-0142" after 500 ms.

• onCall
  (phone: string) => void

  Replaces the tel: link once the number is shown (the demo shows a toast).

• onShare
  () => void

  The share buttons. Default: navigator.share where available, else copies the listing link and shows Link copied.

• onReport
  (report: ListingReport) => (void | Promise<unknown>)

  Sends the report dialog (ListingReport = { reason, details }). A rejection shows an alert in the dialog. Default: a pretend 900 ms request, then a thank you toast.

• onOpenConversation
  () => void

  Go to the conversation after a sent message. Default: navigates to /messages?listing=<id> through the link provider.

• statusdefault "active"
  "active" | "reserved" | "sold"

  reserved: a warning banner, contact still allowed. sold: a neutral banner, contact disabled, grey photos and similar ads first.

• galleryThumbnailsdefault "bottom"
  "start" | "bottom" | "none"

  Where the gallery's thumbnails sit on wide screens; phones swipe with a counter.

• showMapdefault true
  boolean

  The Location section with the map.

• showSafetydefault true
  boolean

  The Stay safe note under the seller.

• stickyBardefault true
  boolean

  Below 1024px, the bottom bar with the price, Call and Message once the contact buttons scroll away.

• defaultMessageOpendefault false
  boolean

  Opens the message dialog on mount.

• labels
  Partial<ListingDetailPageLabels>

  Every visible string (DEFAULT_LISTING_DETAIL_PAGE_LABELS, English), counted ones as functions; nested gallery, lightbox, price, favorite, listingCard, carousel, sellerCard, map, stickyBar and breadcrumbLabels for the composed items. LISTING_DETAIL_PAGE_LABELS_EN is the same set under its older name.

• localedefault "en-US"
  string

  Intl locale for prices, counts and dates.

• currencydefault "USD"
  string

  The currency of amounts without their own (the demo converts the sample to EUR).

• now
  Date | number

  The clock for Today at 2:32 PM. Default: useNow() (the date while hydrating); the demo passes Sep 24, 2026, 4:40 PM.

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

  Send message, the sticky bar, the map pin, the quick replies and the hearts (neutral hearts are red).

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

  The surfaces: gallery, price card, seller card, map and listing cards 12 / 16 / 24px.

• loadingdefault false
  boolean

  The gallery, the texts, the price card, the seller and the similar ads as 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 the breadcrumb, the seller and the listing cards. Default: the provider's (the shell's), then <a>.

• className
  string

  Classes for the root.

• classNames
  Partial<Record<"breadcrumb" | "banner" | "gallery" | "summary" | "attributes" | "description" | "location" | "report" | "aside" | "priceCard" | "seller" | "safety" | "similar" | "stickyBar", string>>

  Classes for the sections.

Parts

FAQ

More React blocks