PandaIDX

Widgets

@pandaidx/widgets is the component library behind every Panda IDX website: MLS search, listing pages, condo and new development directories, home valuation, lead forms and visitor accounts. Drop a complete widget in one line or take it apart down to typed data, while Panda keeps the data, the MLS compliance and the lead routing current.

v1.14.1Next.js 16 · React 1948 widgets

How it works

Every widget comes apart the same five ways. Pick the lowest level that does what you need; parts and hooks always live inside their root, and the required parts (MLS disclaimers, consent) render at every level.

Level 1Complete widget<PropertySearch layout="map-right" />One line renders the whole feature with its design props.
Level 2Slotparts={{ gallery: <MyGallery /> }}Swap one piece and keep the rest of the page.
Level 3Root + parts<PropertyDetailRoot> + partsPlace the parts or blocks in any order or grid of your own.
Level 4Headless hooksusePropertySearch()Typed, formatted data and actions for your own markup.
Level 5Server datagetListingDetail()A typed loader for a page you design from scratch.

Installation

  1. 1npm install <tarball or @pandaidx/widgets>
  2. 2import "@pandaidx/widgets/styles.css" in app/layout.tsx
  3. 3Wrap the site in <PandaProvider publicKey apiUrl preset theme> (app/layout.tsx)
  4. 4In each page (Server Component) call the widget's server loader, then render the widget with its data
  5. 5Allow the images: next.config images.remotePatterns [{ protocol: "https", hostname: "**" }] (listing and blog photos come from several CDNs)
Terminal
npm install https://github.com/pandaidx/panda-widgets/releases/download/v1.14.1/pandaidx-widgets-1.14.1.tgz

Widgets

Foundation

PandaProviderFoundationRoot of every widget: tenant public key, API origin, visitor session, auth dialog, user drawer and the theme (--panda-* tokens on a layout-neutral [data-panda-root]; @panda/ui variable aliases only inside widget roots…0 parts · 0 hooks · 0 loadersIntegrations and analyticsFoundationMandatory headless global host, once directly inside PandaProvider next to PandaAnalytics.0 parts · 0 hooks · 1 loaders

Properties

Property SearchFully headlessFull IDX property search: location autocomplete, map search (drag / draw), sort, filters, listing cards, pagination, like/save/share gated by the visitor session, and the listing detail dialog.24 parts · 4 hooks · 2 loadersProperty DetailFully headlessListing page: action bar (save, collection, share), title, photos, overview + snapshot, map, details table, mortgage calculator and the schedule-a-tour / contact card.20 parts · 5 hooks · 2 loadersHome SearchHeadless hookHomepage hero search of the Panda websites: For Sale / For Rent / Sold tabs over the pill autocomplete (cities, buildings, zip codes, addresses, MLS#) with the black round search button on desktop, and tabs + a pill…0 parts · 1 hooks · 0 loadersListing GridRoot + partsListing grids of the Panda websites outside the search.6 parts · 2 hooks · 1 loadersMLS SheetComplete widgetThe printable MLS sheet of a listing (Panda /mls/<id>/sheet, linked by the panda listing detail): Back to Listing / Print toolbar, photo + price + address header, General, Location, Rooms, Financial, Additional and…2 parts · 0 hooks · 2 loaders

Condos and new developments

Condo DirectoryRoot + partsThe condo directory (Panda /condos): area picker, building name search, status and sort, landing rows per area, building cards (live price ranges and counters) and the buildings map.21 parts · 2 hooks · 2 loadersBuilding DetailRoot + blocksA condo building page (Panda /condos/<name>--<city>): photo gallery, description, facts and sales stats, amenities, the listings inside by status (for sale / for rent / sold, IDX cards with like, collections and the…7 parts · 2 hooks · 2 loadersCondo AreaRoot + partsOne condo area (Panda /area/<slug>): hero with description, market counters, price stats, neighborhood scores, the area outline map and its buildings with paging.1 parts · 1 hooks · 2 loadersNew DevelopmentsRoot + partsPre-construction directory (Panda /new-developments): country, city, status, price and name filters, landing rows per area, project cards (developer, units, asking range) and the map.19 parts · 2 hooks · 2 loadersNew Development DetailRoot + blocksA pre-construction project page (Panda /new-development/<slug>): gallery, description, brochure and video, specs (asking prices, sizes, units, developer, architect), amenities, floor plans, deposit schedule, resale…1 parts · 2 hooks · 2 loaders

Lead capture

Home ValuationFully headlessThe Panda website "How much is my home worth" flow (/how-much-is-my-home-worth), complete and designable (design: colors, background, shape, address bar, report layout; a CMA page with no lead form is MarketAnalysis,…15 parts · 3 hooks · 2 loadersFormsFully headlessA Panda dynamic form (contact, home valuation, request showing, new development, or any form by id) with the websites field renderers.9 parts · 2 hooks · 2 loadersContact PageComplete widgetThe Panda websites /contact page (render it without site chrome): the contact image full height on one side and, on the other, the form assigned to the contact spot with its name and description centered above it…0 parts · 0 hooks · 1 loadersPopupsFully headlessThe website's popups (Popups in the dashboard, manage_popups), with the Panda website behavior: page targeting (/, /*, /listing/*, exact paths; a leading locale is ignored), trigger (delay in seconds, scroll depth, exit…4 parts · 1 hooks · 2 loaders

Visitor accounts

Sign inRoot + partsPanda visitor sign-in rendered inline (not a dialog): the same panels, API calls and session as the provider's auth dialog (email + password, Continue with Google, sign-up with phone + consent, forgot / reset password),…12 parts · 3 hooks · 0 loadersAccount and saved searchesRoot + partsThe visitor account area (collections, saved searches, likes and the visitor's own profile) in its own page (sections in a left sidebar), a dialog-sidebar or the drawer.13 parts · 4 hooks · 0 loadersLike and ShareHeadless hookThe websites listing heart for custom listing cards: signed-out visitors get the sign-up dialog; signed-in visitors like / unlike the listing (their account, the visitor drawer and the owner's CRM activity).0 parts · 2 hooks · 0 loaders

Content

Home CoverHeadless hookHomepage hero of the Panda websites (the original cover): the cover photo (phone cover on phones) or the plan's looping background video, the hero video play button, the owner portrait on phones and the centered…0 parts · 1 hooks · 1 loadersHomepage sectionsComplete widgetThe homepage "Discover Signature Collections" section of the Panda websites: the collections the owner put on the homepage, then the saved searches assigned to it (dashboard), as rounded cards with a photo collage,…0 parts · 0 hooks · 4 loadersBlogRoot + partsThe tenant's published articles as a paginated, crawlable grid (?page=N links).1 parts · 2 hooks · 2 loadersLibrariesComplete widgetA Studio library of the tenant as a card section (like the websites library sections): areas, condo buildings, new developments, saved searches, collections, blog stories, team members or client reviews (the quote and…0 parts · 0 hooks · 1 loadersVideosComplete widgetThe websites profile Videos section (/profile#videos): gray band, centered heading and a grid of YouTube thumbnails with titles, each opening the video dialog.0 parts · 0 hooks · 1 loaders

Agent and team

Agent ProfileHeadless hookThe Panda websites profile page (/profile, /about) or a team member page (/team/<slug>): the About Moderna hero (languages eyebrow, uppercase name with a side rule, title, email, phone, social links, full bio beside the…0 parts · 1 hooks · 1 loadersTeamHeadless hookThe Panda websites /team page: a black "Join the Team" button, the Management group (the owner card first when shown as a member, then members oldest first) and the Realtor Associates, as centered wrapped rows of 360px…0 parts · 1 hooks · 1 loadersOff-Market ListingsHeadless hookThe agent's off-market (exclusive / pocket) listings as the Panda websites /listings page: headline and the websites cards (hover photo gallery with arrows and dots, price with its qualifier, share, beds / baths / ft²)…0 parts · 1 hooks · 1 loaders