Property Detail

Root + parts in your own grid

<PropertyDetailRoot listing={listing} application={application} requestShowingForm={requestShowingForm}>
  <PropertyDetailGallery variant="grid" />
  <div className="grid gap-10 lg:grid-cols-[1fr_360px]">
    <div><PropertyDetailHeader /><PropertyDetailSections sectionStyle="flat" /></div>
    <PropertyDetailAgentCard />
  </div>
  <PropertyDetailDisclaimer />
</PropertyDetailRoot>

Own gallery (mosaic 1 + 4) in the full page, with the shared viewer

// components/listing-mosaic.tsx
"use client"
import Image from "next/image"
import { PropertyDetailGallery, usePropertyGallery } from "@pandaidx/widgets/client"

export const Mosaic = () => {
  const { photos, alt, photoLoading, openPhotos, count, viewport } = usePropertyGallery()
  // Phones keep the swipe carousel.
  if (viewport === "mobile") return <PropertyDetailGallery />
  return (
    // The slot sets the default gallery height (416px) and keeps its bottom gap: the page below does not move.
    <div className="grid h-(--panda-property-detail-gallery-height) grid-cols-4 grid-rows-2 gap-2">
      {photos.slice(0, 5).map((src, i) => (
        <button key={src} type="button" onClick={() => openPhotos(i)} className={i === 0 ? "relative col-span-2 row-span-2" : "relative"}>
          <Image src={src} alt={alt(i)} fill sizes={i === 0 ? "50vw" : "25vw"} {...photoLoading(i)} className="object-cover" />
          {i === 4 && count > 5 ? <span className="absolute inset-0 grid place-items-center bg-foreground/50 text-background">+{count - 5}</span> : null}
        </button>
      ))}
    </div>
  )
}

// app/mls/[listingId]/page.tsx: everything else stays the Panda page
<PropertyDetail {...data} variant="panda" parts={{ gallery: <Mosaic /> }} />
// Colors and spacing: the site's DESIGN.md tokens (no raw colors or arbitrary values).

Own control with the hook

const BookTour = () => {
  const { openRequestShowing } = usePropertyDetail()
  return <button onClick={openRequestShowing}>Book a tour</button>
}

Facts as cards with the headless hook

"use client"
import { usePropertyFacts } from "@pandaidx/widgets/client"

export const FactCards = () => {
  const facts = usePropertyFacts().group("facts")?.facts ?? []
  return (
    <dl className="grid grid-cols-2 gap-4 md:grid-cols-4">
      {facts.map((fact) => (
        <div key={fact.key} className="rounded-lg border p-4"><dt className="text-sm text-muted-foreground">{fact.label}</dt><dd className="text-lg">{fact.value}</dd></div>
      ))}
    </dl>
  )
}

PropertyDetail

Listing page: action bar (save, collection, share), title, photos, overview + snapshot, map, details table, mortgage calculator and the schedule-a-tour / contact card. variant="panda" renders the Panda websites listing page instead (sticky header with status, Est. Payment, MLS Sheet / Video / Add to Collection / Share / Request Showing; strip gallery with Photos/Map toggle and lightbox; accordion Facts, Remarks, Financial, Exterior, Interior, Additional, Location with Street View, Schools, Mortgage; MLS + Panda disclaimers; sticky agent card), shaped by design (or PandaProvider propertyDetail): section order / accordion or flat, action buttons (order, filled CTA, icon or labeled, under the price / over the photos / in the agent card), gallery strip / grid / carousel with autoplay, agent card sidebar / inline / none, copy and hint feedback. For a layout the design cannot express, compose the same parts yourself with PropertyDetailRoot. The layout props below only apply to the template 1 design.

Import from @pandaidx/widgets/client · renders inside PandaProvider

PropertyDetailRoot

Root of a Panda listing detail you lay out yourself: it holds the listing, the site, the design and the shared dialogs (Request Showing form, Contact Listing Agent, mortgage calculator, Add to Collection with sign-in), and tracks the listing view. Place these parts (same import) anywhere inside it, in any order, inside your own grid: PropertyDetailHeader (title + price + actions row; compact, hideActions), PropertyDetailHeading (title, address, beds · baths · size, status; compact), PropertyDetailPrice (price, price-change tag, Est. Payment → mortgage dialog; compact), PropertyDetailActions (actions = overrides of design.actions, layout = bar | stack | floating), PropertyDetailGallery (variant strip | grid | carousel, toggle, autoplay, interval, showButtons), PropertyDetailSections (sections, open, sectionStyle), PropertyDetailSection (one section by id, open and flat, anywhere), PropertyDetailAgentCard (agent + Request Showing CTA) and PropertyDetailDisclaimer (MLS + Panda disclaimers: required by the IDX rules, always render it). Every part takes className; they read design (the props override it per part) and follow the site tokens. usePropertyDetail() returns { listing, application, t, design, isOwner, offMarket, propertyUrl, openRequestShowing, openContactAgent, openMortgage, openCollections, openPhotos } for your own controls (e.g. a custom Book a tour button calling openRequestShowing), and usePropertyGallery() returns the photos + openPhotos to rebuild the gallery your own way (a mosaic, a hero) with the detail's full-screen viewer. The root has no page chrome (no container, sticky header bar or columns): you lay out the whole page. To change ONE piece (a custom gallery, your own agent card) keep PropertyDetail variant="panda" and pass parts={{ gallery: <Mosaic /> }} instead. Prefer PropertyDetail variant="panda" design when the design object covers the layout; the listing dialog of the search cards always uses the design, never a custom root.

Import from @pandaidx/widgets/client · renders inside PandaProvider