Shadcn UI Contact Block
Contact22 is a two-column contact section for multi-location businesses. The left column displays a stacked list of location buttons showing office name and address. When clicked, the corresponding Google Maps iframe and contact info card update to show that location's details. The right column contains the map iframe, an info card with phone and email links, and a validated contact form.
Clicking a location button highlights it with primary colors while others remain neutral with a hover state. The map uses Google Maps embed and updates its query parameter based on selection. The info card displays address, phone, and email with small icons. The form collects name, email, and message with React Hook Form validation.
Clean, functional design with clear interaction patterns. The location list scrolls if there are many offices. The synchronized state between location list and map creates an intuitive experience. Works well for law firms, financial services, multi-branch retail, or any business with physical locations customers need to find.
Dependencies
| Package | Type |
|---|---|
| @hookform/resolvers | NPM |
| lucide-react | NPM |
| react | NPM |
| react-hook-form | NPM |
| zod | NPM |
button @shadcn | Registry |
field @shadcn | Registry |
input @shadcn | Registry |
textarea @shadcn | Registry |