Simple

A footer pairing a logo and short tagline with a tidy row of page links. Rounds off a small business or portfolio site without crowding the layout.

export default function FooterSimple() {
  return (
    <footer className="bg-background w-full border-t">
      <div className="container mx-auto flex flex-col items-center justify-between gap-4 px-4 py-10 md:h-24 md:flex-row md:px-6 md:py-0 2xl:max-w-[1400px]">
        <div className="flex flex-col items-center gap-4 px-8 md:flex-row md:gap-2 md:px-0">
          <p className="text-muted-foreground text-center text-sm leading-loose md:text-left">
            Built with{' '}
            <a
              href="https://nextjs.org"
              target="_blank"
              rel="noreferrer"
              className="font-medium underline underline-offset-4"
            >
              Next.js
            </a>{' '}
            and{' '}
            <a
              href="https://ui.shadcn.com"
              target="_blank"
              rel="noreferrer"
              className="font-medium underline underline-offset-4"
            >
              shadcn/ui
            </a>
            .
          </p>
        </div>
        <div className="flex flex-col items-center gap-4 md:flex-row md:gap-6">
          <nav className="flex gap-4 md:gap-6">
            <a
              href="#"
              className="text-muted-foreground hover:text-foreground text-sm font-medium transition-colors"
            >
              Terms
            </a>
            <a
              href="#"
              className="text-muted-foreground hover:text-foreground text-sm font-medium transition-colors"
            >
              Privacy
            </a>
            <a
              href="#"
              className="text-muted-foreground hover:text-foreground text-sm font-medium transition-colors"
            >
              Contact
            </a>
          </nav>
          <p className="text-muted-foreground text-center text-sm md:text-left">
            &copy; {new Date().getFullYear()} Your Company. All rights reserved.
          </p>
        </div>
      </div>
    </footer>
  );
}

About this block

Simple Footer is a single horizontal bar divided into two sides. The left side holds a short attribution line with inline text links. The right side groups a small navigation row (Terms, Privacy, Contact) beside a copyright notice with the current year. On mobile the two sides stack vertically and center themselves; on wider screens they sit on one line with space between.

Both sides are independent of each other. You can swap the attribution text for a tagline or a logo, reorder or rename the navigation links, and update the company name in the copyright without touching the layout. The whole bar stays in a single row so it never takes more than one visual strip of height.

When to use

Reach for this block when the page needs a proper footer but the site is small enough that deep link columns would feel excessive. It works well for an ecommerce storefront brand where legal links (terms, privacy, contact) are required and the footer should close the page quietly rather than compete with product content above. Compared to the multi-column footer, it keeps the bottom of the page light, and compared to the minimal block it still surfaces the three links visitors expect when they reach the bottom.

A natural flow around it on a Marketing (Legacy) page:

Before

A CTA section to convert visitors before the page ends
A contact section for a support or inquiry form sitting just above the footer

After

Nothing sits after a footer, but pair it with an announcement banner at the very top of the same page to frame the full layout

What you can customize

The block has three swappable zones that each work independently:

Attribution or brand line. Replace the placeholder text and its inline links with your own stack credit, a brief tagline, or a logo mark to anchor your brand on every page.
Navigation links. The three links (Terms, Privacy, Contact) are plain anchors you can rename, reorder, or extend to cover any lightweight footer nav your storefront needs.
Copyright notice. The year updates automatically at runtime, so you only need to replace the company name to make the notice accurate.

Tip: keep the nav to three or four links at most so the bar stays on one line at typical desktop widths without wrapping.

About this block

When to use

A natural flow around it on a Marketing (Legacy) page:

Before

A CTA section to convert visitors before the page ends
A contact section for a support or inquiry form sitting just above the footer

After

Nothing sits after a footer, but pair it with an announcement banner at the very top of the same page to frame the full layout

What you can customize

The block has three swappable zones that each work independently:

Attribution or brand line. Replace the placeholder text and its inline links with your own stack credit, a brief tagline, or a logo mark to anchor your brand on every page.
Navigation links. The three links (Terms, Privacy, Contact) are plain anchors you can rename, reorder, or extend to cover any lightweight footer nav your storefront needs.
Copyright notice. The year updates automatically at runtime, so you only need to replace the company name to make the notice accurate.

Tip: keep the nav to three or four links at most so the bar stays on one line at typical desktop widths without wrapping.

Simple

About this block

When to use

What you can customize

Search Shadcn UI Blocks

About this block

When to use

What you can customize