# Contact 03

> A simple contact form

A shadcn/ui block from the [@shadcnui-blocks](https://shadcnui-blocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnui-blocks/contact-03).

- Page, with a live preview: https://shadcn.exchange/r/shadcnui-blocks/contact-03
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnui-blocks/contact-03-light-6938975d0b469ce9.png
- Registry item: https://shadcnui-blocks.com/r/contact-03.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnui-blocks.com/r/contact-03.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`

## Files

### `src/registry/blocks/shared/contact-03/components/contact.tsx`

```tsx
import { MailIcon, MapPinIcon, MessageCircle, PhoneIcon } from "lucide-react";
import Link from "next/link";

const Contact = () => (
  <div className="flex min-h-screen items-center justify-center pt-12 pb-16 md:pt-16">
    <div className="mx-auto w-full max-w-(--breakpoint-xl) px-6 xl:px-0">
      <b className="font-medium text-muted-foreground text-sm uppercase tracking-wide">
        Contact Us
      </b>
      <h2 className="mt-3 font-medium text-4xl tracking-tight">
        We&apos;d love to hear from you
      </h2>
      <p className="mt-3 text-lg text-muted-foreground md:text-xl">
        Our friendly team is always here to chat.
      </p>
      <div className="mt-14 grid gap-8 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
        <div className="rounded-xl border border-dashed bg-muted/20 p-6 pb-8">
          <div className="flex h-12 w-12 items-center justify-center rounded-full bg-foreground/5 text-foreground dark:bg-muted">
            <MailIcon />
          </div>
          <h3 className="mt-8 font-medium text-xl">Email</h3>
          <p className="mt-1.5 mb-4 text-muted-foreground">
            Our friendly team is here to help.
          </p>
          <Link
            className="font-medium"
            href="mailto:akashmoradiya3444@gmail.com"
          >
            akashmoradiya3444@gmail.com
          </Link>
        </div>
        <div className="rounded-xl border border-dashed bg-muted/20 p-6 pb-8">
          <div className="flex h-12 w-12 items-center justify-center rounded-full bg-foreground/5 text-foreground dark:bg-muted">
            <MessageCircle />
          </div>
          <h3 className="mt-8 font-medium text-xl">Live chat</h3>
          <p className="mt-1.5 mb-4 text-muted-foreground">
            Our friendly team is here to help.
          </p>
          <Link className="font-medium" href="#">
            Start new chat
          </Link>
        </div>
        <div className="rounded-xl border border-dashed bg-muted/20 p-6 pb-8">
          <div className="flex h-12 w-12 items-center justify-center rounded-full bg-foreground/5 text-foreground dark:bg-muted">
            <MapPinIcon />
          </div>
          <h3 className="mt-8 font-medium text-xl">Office</h3>
          <p className="mt-1.5 mb-4 text-muted-foreground">
            Come say hello at our office HQ.
          </p>
          <Link
            className="font-medium"
            href="https://map.google.com"
            target="_blank"
          >
            100 Smith Street Collingwood <br /> VIC 3066 AU
          </Link>
        </div>
        <div className="rounded-xl border border-dashed bg-muted/20 p-6 pb-8">
          <div className="flex h-12 w-12 items-center justify-center rounded-full bg-foreground/5 text-foreground dark:bg-muted">
            <PhoneIcon />
          </div>
          <h3 className="mt-8 font-medium text-xl">Phone</h3>
          <p className="mt-1.5 mb-4 text-muted-foreground">
            Mon-Fri from 8am to 5pm.
          </p>
          <Link className="font-medium" href="tel:akashmoradiya3444@gmail.com">
            +1 (555) 000-0000
          </Link>
        </div>
      </div>
    </div>
  </div>
);

export default Contact;
```