Docs
Footer (Simple)
Footer (Simple)

A comprehensive footer component with navigation links, social links, and branding section. Perfect for website layouts.

scroll down to see footer

Installation

pnpm dlx shadcn@latest add https://deltacomponents.dev/r/footer.json

Usage

import { Footer } from "@/registry/layout/footer"
 
export function BasicFooter() {
  return <Footer brandName="Your Company" />
}
import { Footer } from "@/registry/layout/footer"
 
const customSections = [
  {
    title: "Resources",
    links: [
      { href: "/docs", label: "Documentation" },
      { href: "/guides", label: "Guides" },
      { href: "/api", label: "API Reference" },
    ],
  },
  {
    title: "Community",
    links: [
      { href: "/discord", label: "Discord", external: true },
      { href: "/twitter", label: "Twitter", external: true },
      { href: "/github", label: "GitHub", external: true },
    ],
  },
]
 
export function CustomFooter() {
  return (
    <Footer
      brandName="Your Company"
      sections={customSections}
      socialLinks={[
        {
          href: "https://twitter.com/yourcompany",
          label: "Twitter",
          external: true,
        },
        {
          href: "https://github.com/yourcompany",
          label: "GitHub",
          external: true,
        },
      ]}
      // copyright will automatically use current year: "© 2025 Your Company. All rights reserved."
    />
  )
}
import { Footer } from "@/registry/layout/footer"
 
export function MinimalFooter() {
  return (
    <Footer
      brandName="Your App"
      sections={[]}
      socialLinks={[]}
      copyright="Made with ❤️ by Your Team"
    />
  )
}

API Reference

FooterProps

NameTypeDescriptionDefault
brandNamestringName of your brand/company"Your Brand"
brandHrefstringLink for the brand name"/"
sectionsFooterSection[]Array of navigation sectionsDefault sections (Product, Company, Legal)
socialLinksFooterLink[]Array of social media linksDefault links (Twitter, GitHub, LinkedIn)
copyrightstringCustom copyright textAuto-generated with current year
classNamestringAdditional CSS classes-

FooterSection

NameTypeDescription
titlestringSection title
linksFooterLink[]Array of links in this section
NameTypeDescriptionDefault
hrefstringLink URL-
labelstringLink text-
externalbooleanWhether the link is external (opens in new tab)false

Features

  • Responsive Design: Works seamlessly on all device sizes
  • Customizable Sections: Add your own navigation sections
  • Social Links: Built-in support for social media links
  • Brand Integration: Prominently display your brand
  • Accessibility: Proper ARIA labels and semantic HTML
  • External Link Support: Automatic target="_blank" for external links
  • Theme Support: Works with your design system colors