# Footer 4

> Grid-based footer with social cards, link groups, and copyright bar.

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

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

## Install

```bash
npx shadcn@latest add https://efferd.com/r/footer-4.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/facebook-icon`, `@efferd/instagram-icon`, `@efferd/x-icon`, `@efferd/youtube-icon`

## Files

### `registry/blocks/footer/4/footer.tsx`

```tsx
import { cn } from "@/lib/utils";
import { FacebookIcon } from "@/components/icons/facebook-icon";
import { InstagramIcon } from "@/components/icons/instagram-icon";
import { XIcon } from "@/components/icons/x-icon";
import { YoutubeIcon } from "@/components/icons/youtube-icon";

export function Footer() {
	return (
		<footer
			className={cn(
				"border-t",
				"dark:bg-[radial-gradient(35%_128px_at_50%_0%,--theme(--color-foreground/.08),transparent)]"
			)}
		>
			<div className="relative mx-auto max-w-5xl px-4">
				<div className="relative grid grid-cols-1 border-x md:grid-cols-4 md:divide-x">
					<div>
						<SocialCard
							className="border-t-0"
							href="#"
							icon={<FacebookIcon />}
							title="Facebook"
						/>
						<LinksGroup
							links={[
								{ title: "Pricing", href: "#" },
								{ title: "Testimonials", href: "#" },
								{ title: "FAQs", href: "#" },
								{ title: "Contact Us", href: "#" },
								{ title: "Blog", href: "#" },
							]}
							title="About Us"
						/>
					</div>
					<div>
						<SocialCard href="#" icon={<YoutubeIcon />} title="Youtube" />
						<LinksGroup
							links={[
								{ title: "Help Center", href: "#" },
								{ title: "Terms", href: "#" },
								{ title: "Privacy", href: "#" },
								{ title: "Security", href: "#" },
								{ title: "Cookie Policy", href: "#" },
							]}
							title="Support"
						/>
					</div>

					<div>
						<SocialCard href="#" icon={<XIcon />} title="Twitter" />
						<LinksGroup
							links={[
								{ title: "Forum", href: "#" },
								{ title: "Events", href: "#" },
								{ title: "Partners", href: "#" },
								{ title: "Affiliates", href: "#" },
								{ title: "Career", href: "#" },
							]}
							title="Community"
						/>
					</div>
					<div>
						<SocialCard href="#" icon={<InstagramIcon />} title="Instagram" />
						<LinksGroup
							links={[
								{ title: "Investors", href: "#" },
								{ title: "Terms of Use", href: "#" },
								{ title: "Privacy Policy", href: "#" },
								{ title: "Cookie Policy", href: "#" },
								{ title: "Legal", href: "#" },
							]}
							title="Press"
						/>
					</div>
				</div>
			</div>
			<div className="flex justify-center border-t p-3">
				<p className="text-muted-foreground text-xs">
					&copy; {new Date().getFullYear()} efferd, All rights reserved
				</p>
			</div>
		</footer>
	);
}

type LinksGroupProps = {
	title: string;
	links: { title: string; href: string }[];
};
function LinksGroup({ title, links }: LinksGroupProps) {
	return (
		<div className="p-2">
			<h3 className="font-heading mt-2 mb-3 font-light text-[10px] text-muted-foreground uppercase tracking-wider">
				{title}
			</h3>
			<ul>
				{links.map((link) => (
					<li key={link.title}>
						<a
							className="text-muted-foreground text-sm hover:text-foreground"
							href={link.href}
						>
							{link.title}
						</a>
					</li>
				))}
			</ul>
		</div>
	);
}

function SocialCard({
	title,
	href,
	className,
	icon,
}: React.ComponentProps<"a"> & {
	title: string;
	icon?: React.ReactNode;
}) {
	return (
		<a
			className={cn(
				"flex items-center justify-between border-y p-2 text-sm hover:bg-muted md:border-t-0 dark:hover:bg-muted/50",
				className
			)}
			href={href}
		>
			<span className="flex items-center gap-2 font-medium [&>svg]:size-3.5 [&>svg]:shrink-0">
				{icon}
				{title}
			</span>
			<IconPlaceholder
				className="size-4"
				hugeicons="ArrowRight01Icon"
				lucide="ArrowRightIcon"
				phosphor="ArrowRightIcon"
				remixicon="RiArrowRightLine"
				tabler="IconArrowRight"
			/>
		</a>
	);
}
```