# Centered Footer with Social Icons

> Centred minimal footer: one row of five links, Threads, Mastodon and Discord icon links beneath, and a copyright line. Built on the Footer parts.

A shadcn/ui block from the [@01orbital](https://01orbital.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/01orbital/centered-footer-01).

- Page, with a live preview: https://shadcn.exchange/r/01orbital/centered-footer-01
- Screenshot: https://shadcn.exchange/shot/01orbital/centered-footer-01/light.png
- Registry item: https://01orbital.dev/r/centered-footer-01.json
- Categories: footer
- Listed: 2026-11-01, source last changed 2026-11-01

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/01orbital/centered-footer-01.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: `@phosphor-icons/react`
- Registry items: `@01orbital/footer`

## Files

### `blocks/footer/centered-footer-01/index.tsx`

```tsx
import {
  DiscordLogoIcon,
  MastodonLogoIcon,
  ThreadsLogoIcon,
} from "@phosphor-icons/react/dist/ssr"

import {
  Footer,
  FooterBand,
  FooterFineprint,
  FooterLink,
  FooterLinkRow,
  FooterSocial,
  FooterSocialLink,
} from "@/components/footer/footer"

// The copy: change text here, not in the markup.
const COPY = {
  label: "Footer",
  fineprint: "© 2026 Orbcore, Inc.",
} as const

const LINKS = [
  { label: "About", href: "#" },
  { label: "Blog", href: "#" },
  { label: "Pricing", href: "#" },
  { label: "Docs", href: "#" },
  { label: "Contact", href: "#" },
] as const

const SOCIAL = [
  { name: "Threads", href: "https://threads.net", icon: ThreadsLogoIcon },
  { name: "Mastodon", href: "https://mastodon.social", icon: MastodonLogoIcon },
  { name: "Discord", href: "https://discord.com", icon: DiscordLogoIcon },
] as const

export default function CenteredFooter01() {
  return (
    <Footer>
      <FooterBand className="text-center">
        <nav aria-label={COPY.label}>
          <FooterLinkRow>
            {LINKS.map((link) => (
              <li key={link.label}>
                <FooterLink href={link.href}>{link.label}</FooterLink>
              </li>
            ))}
          </FooterLinkRow>
        </nav>
        <FooterSocial aria-label="Social" className="justify-center">
          {SOCIAL.map(({ name, href, icon: Icon }) => (
            <FooterSocialLink key={name} href={href} aria-label={name}>
              <Icon weight="fill" aria-hidden="true" />
            </FooterSocialLink>
          ))}
        </FooterSocial>
        <FooterFineprint>{COPY.fineprint}</FooterFineprint>
      </FooterBand>
    </Footer>
  )
}
```