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
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