# Contact Section v1

> Two-column contact section. The left column has a light "Let's collaborate" title and YouTube, LinkedIn, and X icon links. The right column has a form with name, email, company, and message fields.

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

- Page, with a live preview: https://shadcn.exchange/r/uiception/contact-section-v1
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/uiception/contact-section-v1-light-c9cdabb2e1c2c26e.png
- Registry item: https://uiception.com/r/contact-section-v1.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://uiception.com/r/contact-section-v1.json
```

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

## Dependencies

- Registry items: `button`, `field`, `input`, `textarea`

## Files

### `registry/new-york/blocks/contact-section-v1/page.tsx`

```tsx
import ContactSectionV1 from "./components/contact-section-v1"

export default function Page() {
  return <ContactSectionV1 />
}
```

### `registry/new-york/blocks/contact-section-v1/components/contact-section-v1.tsx`

```tsx
import Link from "next/link"

import { LinkedinIcon } from "@/components/ui/svgs/linkedinIcon"
import { LinkedinIconDark } from "@/components/ui/svgs/linkedinIconDark"
import { X } from "@/components/ui/svgs/x"
import { XDark } from "@/components/ui/svgs/xDark"
import { Youtube } from "@/components/ui/svgs/youtube"

import ContactForm from "./contact-form"

export default function ContactSectionV1() {
  return (
    <section className="py-16 md:py-20 lg:py-24">
      <div className="mx-auto grid max-w-6xl gap-16 px-4 md:grid-cols-2 md:gap-12">
        <div className="flex flex-col justify-between gap-16">
          <h2 className="text-5xl font-light tracking-tight text-foreground sm:text-6xl lg:text-7xl">
            Let&apos;s collaborate
          </h2>

          <div className="flex flex-col gap-3 text-sm">
            <p className="font-medium text-foreground">Find us</p>
            <div className="flex items-center gap-4">
              <Link
                href="#"
                aria-label="YouTube"
                className="transition-opacity hover:opacity-70"
              >
                <Youtube className="h-5 w-auto" />
              </Link>
              <Link
                href="#"
                aria-label="LinkedIn"
                className="transition-opacity hover:opacity-70"
              >
                <LinkedinIcon className="size-5 dark:hidden" />
                <LinkedinIconDark className="hidden size-5 dark:block" />
              </Link>
              <Link
                href="#"
                aria-label="X"
                className="transition-opacity hover:opacity-70"
              >
                <X className="size-5 dark:hidden" />
                <XDark className="hidden size-5 dark:block" />
              </Link>
            </div>
          </div>
        </div>

        <ContactForm />
      </div>
    </section>
  )
}
```

### `registry/new-york/blocks/contact-section-v1/components/contact-form.tsx`

```tsx
"use client"

import type { FormEvent } from "react"
import { ArrowRight } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"

export default function ContactForm() {
  function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault()
    // Wire this up to your own endpoint or form service.
  }

  return (
    <form onSubmit={handleSubmit}>
      <FieldGroup>
        <div className="grid gap-5 sm:grid-cols-2">
          <Field>
            <FieldLabel htmlFor="contact-name">Name</FieldLabel>
            <Input
              id="contact-name"
              name="name"
              autoComplete="name"
              placeholder="Jane Doe"
              required
            />
          </Field>
          <Field>
            <FieldLabel htmlFor="contact-email">Email</FieldLabel>
            <Input
              id="contact-email"
              name="email"
              type="email"
              autoComplete="email"
              placeholder="jane@acme.com"
              required
            />
          </Field>
        </div>
        <Field>
          <FieldLabel htmlFor="contact-company">
            Company <span className="text-muted-foreground">(optional)</span>
          </FieldLabel>
          <Input
            id="contact-company"
            name="company"
            autoComplete="organization"
            placeholder="Acme"
          />
        </Field>
        <Field>
          <FieldLabel htmlFor="contact-message">Message</FieldLabel>
          <Textarea
            id="contact-message"
            name="message"
            placeholder="A few lines about the project, timeline, and budget."
            required
          />
        </Field>
        <Button type="submit" className="w-full sm:w-fit">
          Send message
          <ArrowRight className="size-4" />
        </Button>
      </FieldGroup>
    </form>
  )
}
```

### `components/ui/svgs/linkedinIcon.tsx`

```tsx
import type { SVGProps } from "react";

const LinkedinIcon = (props: SVGProps<SVGSVGElement>) => (
  <svg {...props} fill="none" viewBox="0 0 24 24">
    <path
      fill="#000"
      d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zM7.119 20.452H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"
    />
  </svg>
);

export { LinkedinIcon };
```

### `components/ui/svgs/linkedinIconDark.tsx`

```tsx
import type { SVGProps } from "react";

const LinkedinIconDark = (props: SVGProps<SVGSVGElement>) => (
  <svg {...props} fill="none" viewBox="0 0 24 24">
    <path
      fill="#fff"
      d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zM7.119 20.452H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"
    />
  </svg>
);

export { LinkedinIconDark };
```

### `components/ui/svgs/x.tsx`

```tsx
import type { SVGProps } from "react";

const X = (props: SVGProps<SVGSVGElement>) => (
  <svg {...props} fill="none" viewBox="0 0 1200 1227">
    <path
      fill="#000"
      d="M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894-377.686-540.24h162.604l304.797 435.991 47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z"
    />
  </svg>
);

export { X };
```

### `components/ui/svgs/xDark.tsx`

```tsx
import type { SVGProps } from "react";

const XDark = (props: SVGProps<SVGSVGElement>) => (
  <svg {...props} fill="none" viewBox="0 0 1200 1227">
    <path
      fill="#fff"
      d="M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894-377.686-540.24h162.604l304.797 435.991 47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z"
    />
  </svg>
);

export { XDark };
```

### `components/ui/svgs/youtube.tsx`

```tsx
import type { SVGProps } from "react";

const Youtube = (props: SVGProps<SVGSVGElement>) => (
  <svg {...props} preserveAspectRatio="xMidYMid" viewBox="0 0 256 180">
    <path
      fill="red"
      d="M250.346 28.075A32.18 32.18 0 0 0 227.69 5.418C207.824 0 127.87 0 127.87 0S47.912.164 28.046 5.582A32.18 32.18 0 0 0 5.39 28.24c-6.009 35.298-8.34 89.084.165 122.97a32.18 32.18 0 0 0 22.656 22.657c19.866 5.418 99.822 5.418 99.822 5.418s79.955 0 99.82-5.418a32.18 32.18 0 0 0 22.657-22.657c6.338-35.348 8.291-89.1-.164-123.134Z"
    />
    <path fill="#FFF" d="m102.421 128.06 66.328-38.418-66.328-38.418z" />
  </svg>
);

export { Youtube };
```