Footer

A comprehensive footer component with brand section, social links, navigation columns, and legal links. Fully responsive and customizable.

Installation

Use the CLI to add this component to your project.

npx shadcn@latest add https://ui.nyxhora.com/r/footer.json

Features

  • Brand Section: Logo, tagline, and social media links
  • Multi-column Layout: Product, Company, and Resources sections
  • Social Icons: Twitter, Discord, Instagram, LinkedIn
  • External Links: Icon indicator for external URLs
  • Legal Section: Privacy, Terms, and Cookie policies
  • Dynamic Year: Auto-updating copyright year
  • Responsive: Stacks on mobile, 4-column grid on desktop

Usage

tsx
10 lines
1
2
3
4
5
6
7
8
9
10
import Footer from "@/components/ui/footer"

export default function Layout({ children }) {
  return (
    <div className="min-h-screen flex flex-col">
      <main className="flex-1">{children}</main>
      <Footer />
    </div>
  )
}

Structure

Brand Section

Logo, description, and social media icons (Twitter, Discord, Instagram, LinkedIn)

Product Links

Features, Pricing, Free Tools, Templates, Blog

Company Links

About, Contact, GitHub (external)

Resources Links

Documentation, FAQ, Community (external)