Contact section

Pro

Contact form with floating labels and inline validation, plus NAP details, live open-now hours and a map card.

app/page.tsx

import { ContactSection } from "@/components/facade/contact-section";

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

Installation

$npx shadcn@latest add @facade/contact-section

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

import { ContactSection } from "@/components/facade/contact-section";

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

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

Props of ContactSection
Prop	Type	Description
eyebrow	string
heading	string
description	string
services	string[]
businessName	string
address	string[]
phone	string
email	string
timeZone	string	IANA time zone used to compute the open-now indicator.
hours	ContactHours[]
mapHref	string
submitLabel	string
successHeading	string
successText	string
onSubmit	(values: ContactFormValues) => void \| Promise<void>	Called with valid values. Return a promise to keep the loading state until it resolves.
className	string

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

Add the Facade contact section to this page and adapt the copy to our business.