Industry kits

site-kit covers what every Sonor site needs. An industry kit adds what one kind of site needs on top of it: an agency's case studies, a brokerage's listings. A kit never rebuilds what site-kit already does. It fetches through site-kit's server data plane, tracks through its analytics and submits through its managed forms, so a kit site still runs on one SONOR_API_KEY and shows up in the same Sonor project.

How a kit fits

• site-kit comes first. Each kit lists @sonordev/site-kit as a peer dependency and uses the copy your site already installs. Wire site-kit as in Get started, then add the kit.
• Nothing new to configure. The kit reads the same SONOR_API_KEY, server-side, and Sonor works out the project from it.
• Server-rendered by default. Kit components render on the server. The few client pieces (a gallery, a view tracker, a form) are small islands that never wrap your page.
• The content lives in Sonor. Case studies and listings are edited in the dashboard, and the live updates route refreshes the pages that show them.

agency-site-kit

For an agency's own site: the work index, a page per case study, and the proof behind every number on it.

pnpm add @sonordev/agency-site-kit @sonordev/site-kit
npx agency-site-kit-setup --site-url https://youragency.com --agency-name "Your Agency"

The setup command scaffolds a /work index, case-study pages, category routes, and the two routes Sonor calls (live updates and draft preview). The renderer it writes is yours to restyle; the kit supplies the rules every case study follows, so a number is always credited to whoever reported it and never overstated.

Read the agency-site-kit docs

re-site-kit

For a brokerage or team site: searchable listings, a page per listing, and the MLS attribution IDX rules require.

pnpm add @sonordev/re-site-kit

// app/listings/page.tsx
import { searchListings } from '@sonordev/re-site-kit/server'
import { ListingGrid, ListingFilters, ListingPagination } from '@sonordev/re-site-kit'

export const revalidate = 60

export default async function ListingsPage({ searchParams }) {
  const params = await searchParams
  const { listings, pagination } = await searchListings({ city: params.city, page: Number(params.page ?? 1) })
  return (
    <main>
      <ListingFilters basePath="/listings" values={{ city: params.city }} />
      <ListingGrid listings={listings} hrefFor={(l) => `/listings/${l.slug}`} />
      <ListingPagination pagination={pagination} basePath="/listings" searchParams={params} />
    </main>
  )
}

The site never holds an MLS credential: Sonor pulls the feed and the kit reads it through the same key as everything else.

Read the re-site-kit docs