# Contact us page 01

> Two-column layout with contact illustration image and contact information grid featuring avatar icons and contact details

A shadcn/ui block from the [@shadcn-studio](https://shadcnstudio.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcn-studio/contact-us-page-01).

- Page, with a live preview: https://shadcn.exchange/r/shadcn-studio/contact-us-page-01
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-studio/contact-us-page-01-light-8b121705b64a9847.png
- Registry item: https://shadcnstudio.com/r/new-york-v4/contact-us-page-01.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnstudio.com/r/new-york-v4/contact-us-page-01.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`
- Registry items: `card`, `avatar`

## Files

### `src/registry/new-york/blocks/marketing-ui/contact-us-page/contact-us-page-01/page.tsx`

```tsx
import { Clock8Icon, MapPinIcon, BriefcaseBusinessIcon, PhoneIcon } from 'lucide-react'

import ContactUs from '@/registry/new-york/components/blocks/contact-us-page-01/contact-us-page-01'

const contactInfo = [
  {
    title: 'Office Hours',
    icon: Clock8Icon,
    description: 'Monday-Friday\n8:00 am to 5:00 pm'
  },
  {
    title: 'Our Address',
    icon: MapPinIcon,
    description: '802 Perston Rd,Maine\n96812, USA'
  },
  {
    title: 'Office 2',
    icon: BriefcaseBusinessIcon,
    description: '802 Perston Rd,Maine\n96812, USA'
  },
  {
    title: 'Get in Touch',
    icon: PhoneIcon,
    description: '+1-316-888-9685\n+1-316-477-0169'
  }
]

const ContactUsPage = () => {
  return <ContactUs contactInfo={contactInfo} />
}

export default ContactUsPage
```

### `src/registry/new-york/components/blocks/contact-us-page-01/contact-us-page-01.tsx`

```tsx
import type { ComponentType } from 'react'

import { Card, CardContent } from '@/registry/new-york/ui/card'
import { Avatar, AvatarFallback } from '@/registry/new-york/ui/avatar'

type ContactInfo = {
  title: string
  icon: ComponentType
  description: string
}[]

const ContactUs = ({ contactInfo }: { contactInfo: ContactInfo }) => {
  return (
    <section className='bg-muted py-8 sm:py-16 lg:py-24'>
      <div className='mx-auto max-w-7xl px-4 sm:px-6 lg:px-8'>
        {/* Header */}
        <div className='relative mx-auto mb-12 w-fit sm:mb-16 lg:mb-24'>
          <h2 className='text-2xl font-semibold md:text-3xl lg:text-4xl'>Contact Us</h2>
          <span className='bg-primary absolute top-9 left-0 h-px w-full'></span>
        </div>

        <div className='grid items-center gap-12 lg:grid-cols-2'>
          <img
            src='https://cdn.shadcnstudio.com/ss-assets/blocks/marketing/contact-us/image-1.png'
            alt='Contact illustration'
            className='size-full rounded-md object-cover max-lg:max-h-70'
          />

          <div>
            <h3 className='mb-6 text-2xl font-semibold'>Happy to help you!</h3>
            <p className='text-muted-foreground mb-10 text-lg font-medium'>
              shadcn/studio gives you the blocks and components you need to create a truly professional website, landing
              page or admin panel for your SaaS and gives the blocks.
            </p>

            {/* Contact Info Grid */}
            <div className='grid gap-6 sm:grid-cols-2'>
              {contactInfo.map((info, index) => (
                <Card className='border-none shadow-none' key={index}>
                  <CardContent className='flex flex-col items-center gap-4 text-center'>
                    <Avatar className='size-9 border'>
                      <AvatarFallback className='text-card-foreground bg-transparent [&>svg]:size-5'>
                        <info.icon />
                      </AvatarFallback>
                    </Avatar>
                    <div className='space-y-3'>
                      <h4 className='text-lg font-semibold'>{info.title}</h4>
                      <div className='text-muted-foreground text-base font-medium'>
                        {info.description.split('\n').map((line, idx) => (
                          <p key={idx}>{line}</p>
                        ))}
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

export default ContactUs
```