# Contact 2

> Three-card contact layout with email, community, and social links.

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

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

## Install

```bash
npx shadcn@latest add https://efferd.com/r/contact-2.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`, `@efferd/x-icon`

## Files

### `registry/blocks/contact/2/contact.tsx`

```tsx
import { cn } from "@/lib/utils";
import { XIcon } from "@/components/icons/x-icon";
import { Button } from "@/components/ui/button";

const APP_EMAIL = "mail@example.com";

const data = [
	{
		title: "Email Us",
		description: "We respond to all emails within 24 hours.",
		icon: (
			<IconPlaceholder
				hugeicons="MailSend01Icon"
				lucide="Mail"
				phosphor="EnvelopeIcon"
				remixicon="RiMailLine"
				tabler="IconMail"
			/>
		),
		href: `mailto:${APP_EMAIL}`,
		label: APP_EMAIL,
	},
	{
		title: "Send us DM",
		description: "Send us a direct message on X for quick answers.",
		icon: <XIcon />,
		href: "#",
		label: "@efferdui",
	},
	{
		title: "Join the community",
		description: "Join our community to connect with other users.",
		icon: (
			<IconPlaceholder
				hugeicons="UserGroupIcon"
				lucide="Users"
				phosphor="UsersIcon"
				remixicon="RiGroupLine"
				tabler="IconUsers"
			/>
		),
		href: "#",
		label: "Join Discord",
	},
];

export function Contact() {
	return (
		<div className="mx-auto max-w-4xl">
			<div className="mb-12 flex max-w-md flex-col justify-center gap-2">
				<h1 className="font-heading font-bold text-2xl md:text-3xl">Contact Us</h1>
				<p className="text-base text-muted-foreground">
					We&apos;re here to help and answer any question you might have, We
					look forward to hearing from you.
				</p>
			</div>
			<div className="grid gap-0.5 overflow-hidden rounded-lg bg-muted p-0.5 md:grid-cols-3 dark:bg-muted/50">
				{data.map((item) => (
					<div
						className="flex flex-col gap-3 rounded-lg bg-background px-6 py-6 shadow-xs"
						key={item.title}
					>
						<div
							className={cn(
								"flex items-center gap-x-2",
								"[&_svg]:size-4 [&_svg]:text-muted-foreground"
							)}
						>
							{item.icon}
							<h2 className="font-heading text-sm">{item.title}</h2>
						</div>
						<p className="text-muted-foreground text-sm">{item.description}</p>
						<div className="mt-1 flex items-center gap-x-2">
							<Button asChild variant="link">
								<a href={item.href}>{item.label}</a>
							</Button>
						</div>
					</div>
				))}
			</div>
		</div>
	);
}
```