Skip to main content
Clever Ops

Contact Split Map

Contact section with a token-drawn SVG map, abstract street grid, primary pin, office switcher, and working tel, mailto and directions links. React + Tailwind, no map embed.

Preview & code

Loading Contact Split Map preview
Open in v0

Installation

pnpm dlx shadcn@latest add @cleverui/contact-split-map

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx
import { ContactSplitMap } from '@/components/blocks/contact-split-map'
Exampletsx
'use client'

import { ContactSplitMap } from '@/components/blocks/contact-split-map'

export default function ContactSplitMapDemo() {
  return (
    <ContactSplitMap
      heading="Find the studio"
      intro="Two doors, one team. Drop in whenever we're open, or open the pin in your maps app."
      directionsLabel="Open in Maps"
      defaultIndex={0}
      locations={[
        {
          name: 'Collingwood',
          address: [
            'Northbeam Studio',
            '42 Peel Street',
            'Collingwood VIC 3066',
            'Australia',
          ],
          phone: '+61 3 9012 4480',
          email: 'hello@northbeam.studio',
          hours: 'Mon – Fri, 9:00 – 17:30',
          mapsHref:
            'https://maps.google.com/?q=42+Peel+Street+Collingwood+VIC+3066',
          pin: { x: 38, y: 42 },
        },
        {
          name: 'Sydney',
          address: [
            'Northbeam East',
            '18/88 Riley Street',
            'Surry Hills NSW 2010',
            'Australia',
          ],
          phone: '+61 2 8310 2291',
          email: 'sydney@northbeam.studio',
          hours: 'Mon – Fri, 9:30 – 18:00',
          mapsHref:
            'https://maps.google.com/?q=88+Riley+Street+Surry+Hills+NSW+2010',
          pin: { x: 68, y: 58 },
        },
      ]}
    />
  )
}

API reference

ContactSplitMap accepts the following props.

PropTypeDefaultDescription
headingstring'Find the studio'–
intro*string–one sentence under the heading
locations*ContactSplitMapLocation[]–1–3 offices; pin is a 0–100 coordinate pair on the drawn map
defaultIndexnumber0office selected on first render, SSR renders its pin and details
directionsLabelstring'Open in Maps'text of the external directions anchor
headingLevel2 | 32–

…plus everything from Omit< React.HTMLAttributes<HTMLElement>, 'onDrag' | 'onDragStart' | 'onDragEnd' | 'onAnimationStart' >: className, event handlers, aria attributes and the rest pass straight through.

Referenced types

Typestsx
export interface ContactSplitMapLocation {
  name: string
  address: string[]
  phone?: string
  email?: string
  /** preformatted string, e.g. 'Mon - Fri, 9:00 - 17:30' */
  hours?: string
  /** opens the real map service */
  mapsHref: string
  /** 0–100 coordinate pair on the drawn map */
  pin: { x: number; y: number }
}

Frequently asked questions

How do I install the Contact Split Map component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/contact-split-map`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Contact Split Map require?

Contact Split Map uses motion on top of React and Tailwind CSS. You don't need to install it manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Contact Split Map to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Want this built for you?

CleverUI is built by the Clever Ops web team. If you'd rather ship a hand-coded, fast, custom website than assemble one, we build them for Australian businesses every week.

Explore web development services