Docs

Footer (Simple)

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

Demo

Code

Open in

scroll down to see footer

Installation

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

Usage

Basic Footer

import { Footer } from "@/registry/layout/footer"

export function BasicFooter() {
  return <Footer brandName="Your Company" />
}

Custom Footer with Sections

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."
    />
  )
}

Minimal Footer

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

Name	Type	Description	Default
`brandName`	`string`	Name of your brand/company	`"Your Brand"`
`brandHref`	`string`	Link for the brand name	`"/"`
`sections`	`FooterSection[]`	Array of navigation sections	Default sections (Product, Company, Legal)
`socialLinks`	`FooterLink[]`	Array of social media links	Default links (Twitter, GitHub, LinkedIn)
`copyright`	`string`	Custom copyright text	Auto-generated with current year
`className`	`string`	Additional CSS classes	-

FooterSection

Name	Type	Description
`title`	`string`	Section title
`links`	`FooterLink[]`	Array of links in this section

FooterLink

Name	Type	Description	Default
`href`	`string`	Link URL	-
`label`	`string`	Link text	-
`external`	`boolean`	Whether 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

Welcome