How do I install the Footer component?

You can install the Footer component using the shadcn CLI: npx shadcn@latest add "https://ui.nyxhora.com/r/footer.json". Alternatively, copy the component code directly from the documentation.

Is the Footer component accessible?

Yes, the Footer component is built with accessibility in mind using Radix UI primitives. It supports keyboard navigation, screen readers, and follows WCAG guidelines.

Can I customize the Footer component?

Absolutely! The Footer component is fully customizable using Tailwind CSS classes. You can modify colors, sizes, animations, and more by editing the component code or passing custom className props.

Does the Footer component work with Next.js?

Yes, all Nyxhora UI components including Footer are fully compatible with Next.js 14+ (including Next.js 15), supporting both the App Router and Pages Router.

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

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)