Service area

Pro

Interactive zone map with numbered service areas, city and ZIP lists, and an animated ZIP code checker.

app/page.tsx

import { ServiceArea } from "@/components/facade/service-area";

export default function Demo() {
  return <ServiceArea />;
}

Installation

$npx shadcn@latest add @facade/service-area

Pro items install from the private @facade registry with your license key. Set it up once.

import { ServiceArea } from "@/components/facade/service-area";

export default function Page() {
  return <ServiceArea />;
}

ServiceAreaProps is exported, so you can extend or wrap it. Every prop has a default; <ServiceArea /> renders the example above.

Props of ServiceArea
Prop	Type	Description
eyebrow	string
heading	string
description	string
zones	ServiceZone[]
hqLabel	string	Name for the business HQ marker.
hqX	number
hqY	number
riverLabel	string	Legend label for the decorative river line. Pass an empty string to hide it.
checkerLabel	string
checkerPlaceholder	string
successMessage	(zip: string, zone: ServiceZone) => string
failureMessage	(zip: string) => string
ctaLabel	string
ctaHref	string
waitlistLabel	string
waitlistHref	string
className	string

With the Facade MCP server connected, this prompt is enough:

Add the Facade service area to this page and adapt the copy to our business.