# Contact 1

> Compact contact strip with phone, email, and office details.

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

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

## Install

```bash
npx shadcn@latest add https://efferd.com/r/contact-1.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: `@efferd/full-width-divider`

## Files

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

```tsx
import { cn } from "@/lib/utils";
import { FullWidthDivider } from "@/components/full-width-divider";

const data = [
	{
		title: "Call Us Today!",
		value: "+1 (555) 123-4567",
		icon: (
			<IconPlaceholder
				hugeicons="Call02Icon"
				lucide="Phone"
				phosphor="PhoneIcon"
				remixicon="RiPhoneLine"
				tabler="IconPhone"
			/>
		),
	},
	{
		title: "Send an Email",
		value: "mail@example.com",
		icon: (
			<IconPlaceholder
				hugeicons="MailSend01Icon"
				lucide="Mail"
				phosphor="EnvelopeIcon"
				remixicon="RiMailLine"
				tabler="IconMail"
			/>
		),
	},
	{
		title: "Visit Our Office",
		value: "100 Smith Street, VIC",
		icon: (
			<IconPlaceholder
				hugeicons="Location01Icon"
				lucide="MapPin"
				phosphor="MapPinIcon"
				remixicon="RiMapPinLine"
				tabler="IconMapPin"
			/>
		),
	},
];

export function Contact() {
	return (
		<div className="mx-auto max-w-4xl">
			<h2 className="font-heading mb-6 font-medium text-lg md:text-2xl">
				Have Questions? Get in Touch!
			</h2>
			<div className="relative">
				<FullWidthDivider position="top" />
				<div className="grid gap-px overflow-hidden bg-border px-px md:grid-cols-3">
					{data.map((item) => (
						<div
							className="flex items-center gap-3 bg-background p-2 shadow-xs"
							key={item.title}
						>
							<div
								className={cn(
									"flex size-12 shrink-0 items-center justify-center rounded-lg bg-muted/50",
									"[&_svg]:size-4 [&_svg]:text-muted-foreground"
								)}
							>
								{item.icon}
							</div>
							<div className={cn("flex flex-col gap-y-0.5")}>
								<h2 className="font-heading text-sm">{item.title}</h2>
								<p className="text-muted-foreground text-xs">{item.value}</p>
							</div>
						</div>
					))}
				</div>
				<FullWidthDivider position="bottom" />
			</div>
		</div>
	);
}
```