Shadcn UI Contact Block
Contact23 is a store locator for retail or service businesses. The header has a headline, description, and a search bar with zip code input and button. Below, a two-column layout shows store cards on the left and a large map on the right. Each card displays store name, distance indicator, address with icon, phone with icon, hours with icon, and two action buttons (Get Directions, Call Store).
Cards are bordered containers that highlight on hover and when selected, with a chevron that animates to the right. The map is a Google Maps iframe that updates based on the selected store. The map column is sticky on desktop so it stays visible while scrolling through the store list.
Functional and scannable with clear visual hierarchy. Icons provide quick recognition of information types. The distance indicator helps users identify nearest locations. The sticky map creates a split-app feel common in store locators. Works for retail chains, restaurants, banks, gyms, or any business with multiple physical locations.
Dependencies
| Package | Type |
|---|---|
| lucide-react | NPM |
| react | NPM |
button @shadcn | Registry |
input @shadcn | Registry |