# Contact 5

> Contact 5 variant for block.

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

- Page, with a live preview: https://shadcn.exchange/r/uiable/block-contact-5
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/uiable/block-contact-5-light-595cd611af45c94e.png
- Registry item: https://uiable.com/r/block-contact-5.json
- Categories: contact
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://uiable.com/r/block-contact-5.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: `framer-motion`
- Registry items: `@uiable/button`, `@uiable/field`, `@uiable/input`, `@uiable/textarea`

## Files

### `src/components/uiable/blocks/contact/contact-5/contact-5.tsx`

```tsx
"use client"

// shadcn
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"

// third-party
import { motion, type Variants } from "framer-motion"

//  ------------------------------ | CONTACT 5 | ------------------------------  //

const containerVariants: Variants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1,
      delayChildren: 0.1,
    },
  },
}

const itemVariants: Variants = {
  hidden: { y: 20, opacity: 0 },
  visible: {
    y: 0,
    opacity: 1,
    transition: { duration: 0.5, ease: [0.16, 1, 0.3, 1] },
  },
}

const sidebarCardVariants: Variants = {
  hidden: { x: 30, opacity: 0 },
  visible: {
    x: 0,
    opacity: 1,
    transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] },
  },
}

export default function Contact5() {
  return (
    <div className="relative overflow-hidden bg-linear-to-r from-slate-900 to-slate-800 py-24 sm:py-32">
      <motion.span
        animate={{
          scale: [1, 1.08, 1],
          x: ["-50%", "-48%", "-50%"],
          y: [0, -10, 0],
        }}
        transition={{ duration: 12, repeat: Infinity, ease: "easeInOut" }}
        className="absolute -bottom-80 left-2/4 block h-100 w-100 -translate-x-2/4 rounded-full bg-linear-to-r from-cyan-500 to-blue-500 lg:top-2/4 lg:-right-120 lg:left-auto lg:-translate-y-2/4"
      ></motion.span>
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 1 }}
        className="absolute inset-0 z-20 bg-slate-900/10 backdrop-blur-[150px]"
      ></motion.div>
      <div className="relative z-30 container mx-auto px-6 lg:px-8">
        <motion.div
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, margin: "-100px" }}
          variants={containerVariants}
          className="flex flex-col items-center justify-center gap-6 lg:flex-row"
        >
          <div className="w-full basis-full text-center lg:basis-5/12">
            <div className="dark mx-auto w-full rounded-xl bg-slate-800 p-5 sm:p-14">
              <div className="flex flex-col gap-8">
                <div className="mx-auto flex max-w-108 flex-col items-center gap-2 text-center sm:gap-4">
                  <motion.h2
                    variants={itemVariants}
                    className="text-lg font-medium text-slate-50 sm:text-3xl"
                  >
                    Get in Touch
                  </motion.h2>
                  <motion.p
                    variants={itemVariants}
                    className="mmax-w-90 text-slate-300"
                  >
                    Get in touch for questions, support, or feedback. We’re here
                    to help and hear from you.
                  </motion.p>
                </div>
                <FieldGroup>
                  <div className="grid grid-cols-12 gap-6 text-left">
                    <div className="col-span-6">
                      <motion.div variants={itemVariants}>
                        <Field>
                          <FieldLabel
                            className="text-slate-100"
                            htmlFor="fieldgroup-name"
                          >
                            First Name
                          </FieldLabel>
                          <Input
                            id="fieldgroup-name"
                            placeholder="Jordan"
                            className="border-slate-600 bg-slate-700 focus-visible:border-cyan-500 focus-visible:ring-cyan-500/30"
                          />
                        </Field>
                      </motion.div>
                    </div>
                    <div className="col-span-6">
                      <motion.div variants={itemVariants}>
                        <Field>
                          <FieldLabel
                            className="text-slate-100"
                            htmlFor="fieldgroup-lname"
                          >
                            Last Name
                          </FieldLabel>
                          <Input
                            id="fieldgroup-lname"
                            placeholder="Lee"
                            className="border-slate-600 bg-slate-700 focus-visible:border-cyan-500 focus-visible:ring-cyan-500/30"
                          />
                        </Field>
                      </motion.div>
                    </div>
                  </div>
                  <div className="grid grid-cols-12 gap-6 text-left">
                    <div className="col-span-6">
                      <motion.div variants={itemVariants}>
                        <Field>
                          <FieldLabel
                            className="text-slate-100"
                            htmlFor="fieldgroup-email"
                          >
                            Email
                          </FieldLabel>
                          <Input
                            id="fieldgroup-email"
                            type="email"
                            placeholder="name@example.com"
                            className="border-slate-600 bg-slate-700 focus-visible:border-cyan-500 focus-visible:ring-cyan-500/30"
                          />
                        </Field>
                      </motion.div>
                    </div>
                    <div className="col-span-6">
                      <motion.div variants={itemVariants}>
                        <Field>
                          <FieldLabel
                            className="text-slate-100"
                            htmlFor="fieldgroup-subject"
                          >
                            Subject
                          </FieldLabel>
                          <Input
                            id="fieldgroup-subject"
                            placeholder="Marketing"
                            className="border-slate-600 bg-slate-700 focus-visible:border-cyan-500 focus-visible:ring-cyan-500/30"
                          />
                        </Field>
                      </motion.div>
                    </div>
                  </div>
                  <motion.div variants={itemVariants} className="text-left">
                    <Field>
                      <FieldLabel
                        className="text-slate-100"
                        htmlFor="textarea-header-footer-12"
                      >
                        Messege
                      </FieldLabel>
                      <Textarea
                        id="textarea-header-footer-12"
                        placeholder="Enter your text here..."
                        className="resize-none border-slate-600 bg-slate-700 focus-visible:border-cyan-500 focus-visible:ring-cyan-500/30"
                      />
                    </Field>
                  </motion.div>
                  <motion.div variants={itemVariants}>
                    <Field orientation="horizontal" className="justify-center">
                      <Button
                        type="reset"
                        size="lg"
                        variant="outline"
                        className="rounded-full text-slate-100 hover:translate-y-1 hover:opacity-90"
                      >
                        Reset
                      </Button>
                      <Button
                        type="submit"
                        size="lg"
                        className="rounded-full bg-linear-to-r from-cyan-500 to-blue-500 shadow-[0_4px_6px_-2px_#b6c0dbd9] transition-all hover:translate-y-1 hover:opacity-90 hover:shadow-none dark:shadow-none"
                      >
                        Submit
                      </Button>
                    </Field>
                  </motion.div>
                </FieldGroup>
              </div>
            </div>
          </div>
          <div className="w-full basis-full text-left lg:basis-5/12">
            <div className="flex flex-col gap-4">
              {[
                {
                  title: "Email",
                  color:
                    "bg-pink-500/10 text-pink-500 group-hover:bg-white group-hover:text-pink-500",
                  href: "mailto:contact@example.com",
                  value: "contact@example.com",
                  hoverBg: "hover:bg-pink-500",
                  icon: (
                    <svg
                      className="size-8"
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="none"
                    >
                      <path
                        d="M6 13c-2.76 0-5 2.23-5 5s2.24 5 5 5 5-2.24 5-5-2.23-5-5-5Zm-2.04 2.96H6a.68.68 0 0 1 0 1.36H3.96a.68.68 0 0 1 0-1.36Zm4.08 4.08H3.96a.68.68 0 0 1-.68-.68c0-.37.31-.68.68-.68h4.09c.38 0 .68.31.68.68 0 .37-.31.68-.69.68Z"
                        fill="currentColor"
                      />
                      <path
                        d="M17 3H7C4 3 2 4.5 2 8v3.14c0 .73.75 1.19 1.42.9a6.51 6.51 0 0 1 3.66-.45c2.62.43 4.76 2.5 5.29 5.1.15.76.17 1.5.07 2.21-.08.59.4 1.11.99 1.11H17c3 0 5-1.5 5-5V8c0-3.5-2-5-5-5Zm.47 5.59-3.13 2.5c-.66.53-1.5.79-2.34.79-.84 0-1.69-.26-2.34-.79l-3.13-2.5a.77.77 0 0 1-.12-1.06c.26-.32.73-.38 1.05-.12l3.13 2.5c.76.61 2.05.61 2.81 0l3.13-2.5c.32-.26.8-.21 1.05.12.26.32.21.8-.11 1.06Z"
                        fill="currentColor"
                      />
                    </svg>
                  ),
                },
                {
                  title: "Address",
                  color:
                    "bg-sky-500/10 text-sky-500 group-hover:bg-white group-hover:text-sky-500",
                  href: "#",
                  value: "118 E John Carpenter Fwy, Irving, Texas",
                  hoverBg: "hover:bg-sky-500",
                  icon: (
                    <svg
                      className="size-8"
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="none"
                    >
                      <path
                        d="M20.621 8.45c-1.05-4.62-5.08-6.7-8.62-6.7h-.01c-3.53 0-7.57 2.07-8.62 6.69-1.17 5.16 1.99 9.53 4.85 12.28a5.436 5.436 0 0 0 3.78 1.53c1.36 0 2.72-.51 3.77-1.53 2.86-2.75 6.02-7.11 4.85-12.27Zm-8.62 5.01a3.15 3.15 0 1 1 0-6.3 3.15 3.15 0 0 1 0 6.3Z"
                        fill="currentColor"
                      />
                    </svg>
                  ),
                },
                {
                  title: "Phone",
                  color:
                    "bg-lime-500/10 text-lime-500 group-hover:bg-white group-hover:text-lime-500",
                  href: "tel:+1 (555) 123-4567",
                  value: "+1 (555) 123-4567",
                  hoverBg: "hover:bg-lime-500",
                  icon: (
                    <svg
                      className="size-8"
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="none"
                    >
                      <path
                        fill="currentColor"
                        d="M11.05 14.95L9.2 16.8c-.39.39-1.01.39-1.41.01-.11-.11-.22-.21-.33-.32a28.414 28.414 0 01-2.79-3.27c-.82-1.14-1.48-2.28-1.96-3.41C2.24 8.67 2 7.58 2 6.54c0-.68.12-1.33.36-1.93.24-.61.62-1.17 1.15-1.67C4.15 2.31 4.85 2 5.59 2c.28 0 .56.06.81.18.26.12.49.3.67.56l2.32 3.27c.18.25.31.48.4.7.09.21.14.42.14.61 0 .24-.07.48-.21.71-.13.23-.32.47-.56.71l-.76.79c-.11.11-.16.24-.16.4 0 .08.01.15.03.23.03.08.06.14.08.2.18.33.49.76.93 1.28.45.52.93 1.05 1.45 1.58.1.1.21.2.31.3.4.39.41 1.03.01 1.43zM21.97 18.33a2.54 2.54 0 01-.25 1.09c-.17.36-.39.7-.68 1.02-.49.54-1.03.93-1.64 1.18-.01 0-.02.01-.03.01-.59.24-1.23.37-1.92.37-1.02 0-2.11-.24-3.26-.73s-2.3-1.15-3.44-1.98c-.39-.29-.78-.58-1.15-.89l3.27-3.27c.28.21.53.37.74.48.05.02.11.05.18.08.08.03.16.04.25.04.17 0 .3-.06.41-.17l.76-.75c.25-.25.49-.44.72-.56.23-.14.46-.21.71-.21.19 0 .39.04.61.13.22.09.45.22.7.39l3.31 2.35c.26.18.44.39.55.64.1.25.16.5.16.78z"
                      />
                    </svg>
                  ),
                },
              ].map((card, idx) => (
                <motion.div
                  key={idx}
                  variants={sidebarCardVariants}
                  whileHover={{ scale: 1.02, x: 5 }}
                  className={`group cursor-pointer rounded-2xl p-6 transition-all ${card.hoverBg}`}
                >
                  <div className="flex flex-row items-center gap-6">
                    <motion.div
                      whileHover={{ rotate: 15 }}
                      className={`mx-auto inline-flex size-16 shrink-0 items-center justify-center rounded-full transition-all ${card.color}`}
                    >
                      {card.icon}
                    </motion.div>
                    <div className="flex grow flex-col gap-0.5">
                      <p className="text-lg text-slate-100 transition-all group-hover:text-white sm:text-xl">
                        {card.title}
                      </p>
                      <a href={card.href}>
                        <p className="text-md text-slate-400 transition-all group-hover:text-white sm:text-lg">
                          {card.value}
                        </p>
                      </a>
                    </div>
                  </div>
                </motion.div>
              ))}
            </div>
          </div>
        </motion.div>
      </div>
    </div>
  )
}
```