# Agency: Contact

> The question, a line on how the studio replies, and the email set large with a copy button.

A shadcn/ui block from the [@eased](https://eased.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/eased/agency-contact).

- Page, with a live preview: https://shadcn.exchange/r/eased/agency-contact
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/eased/agency-contact-light-b8b4b80bafb47614.png
- Registry item: https://eased.dev/r/agency-contact.json
- Listed: 2026-10-23, source last changed 2026-10-23

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/eased/agency-contact.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: `motion`
- Registry items: `https://eased.dev/r/eased-tokens.json`, `https://eased.dev/r/eased-motion.json`, `https://eased.dev/r/agency-core.json`, `https://eased.dev/r/button.json`, `https://eased.dev/r/eased-copy.json`

## Files

### `src/registry/eased/templates/agency/contact.tsx`

```tsx
"use client";

import { CopyIcon, useCopy } from "../../_primitives/copy/copy";
import { Button } from "../../button/button";
import { contact } from "./content";
import { Reveal, Section } from "./kit";

/**
 * The close: the question, a line on how the studio answers, and the email set as large as the
 * question, as the one way in. A button beside it copies the address, its label swapping to
 * Copied, for people whose mail app is not the default.
 */
export function Contact() {
  const { copied, copy } = useCopy(contact.email);
  return (
    <Section id="contact" label={contact.label} className="flex flex-col gap-pad-lg">
      <Reveal className="flex flex-col gap-pad-base">
        <p className="font-display text-display-5xl font-medium tracking-display text-balance text-text sm:text-display-6xl">{contact.title}</p>
        <p className="max-w-xl text-ui-md text-pretty text-text-secondary">{contact.body}</p>
      </Reveal>
      <Reveal index={1} className="flex flex-wrap items-center gap-x-pad-md gap-y-in">
        <a
          href={`mailto:${contact.email}`}
          className="focus-ring min-w-0 rounded-control-sm font-display text-display-3xl font-medium tracking-display break-all text-text underline decoration-line-strong decoration-2 underline-offset-[0.18em] transition-colors duration-(--eased-duration-fast) ease-standard hover-fine:decoration-text sm:text-display-5xl"
        >
          {contact.email}
        </a>
        <Button variant="secondary" swapKey={copied ? "copied" : "idle"} onClick={() => void copy()}>
          <CopyIcon copied={copied} />
          {copied ? contact.copied : contact.copy}
        </Button>
        <span role="status" className="sr-only">
          {copied ? contact.copied : ""}
        </span>
      </Reveal>
    </Section>
  );
}
```