The Footer component is a fully configurable, responsive, and theme-aware UI element built with Next.js and Shadcn-style design. It supports dynamic navigation columns, customizable social media links with Lucide icons, and optional badges for highlighting features like “Pro,” “New,” or “Hiring.” The component adapts seamlessly to light and dark modes using Tailwind CSS, ensures accessibility with proper aria-labels, and leverages Next.js Link for client-side navigation. Designed for flexibility, it allows developers to easily extend columns, add additional social platforms, and include extra content like legal links or community sections, making it ideal for professional SaaS, product, or corporate websites.
import { Footer } from "@/components/ui/footer-1";
import {
Instagram,
Twitter,
Linkedin,
Github,
Youtube,
Facebook,
} from "lucide-react";
export default function FooterDemo() {
return (
<div className="min-h-screen flex flex-col justify-between">
<Footer
logoSrc="https://cdn.21st.dev/assets/localized/06ad69f12ef04e1f40fb3ec9db4220563891463dba3f8fe79723a89dae824206.png"
logoAlt="Ruixen Logo"
description="Empowering teams to achieve success through intuitive UI and seamless collaboration."
socialLinks={[
{
icon: Instagram,
href: "https://instagram.com",
label: "Instagram",
},
{ icon: Twitter, href: "https://x.com/ruixen_ui", label: "Twitter" },
{
icon: Linkedin,
href: "https://21st.dev/?ref=ruixen",
label: "LinkedIn",
},
// { icon: Github, href: "https://21st.dev/?ref=ruixen", label: "GitHub" },
// { icon: Youtube, href: "https://21st.dev/?ref=ruixen", label: "YouTube" },
// { icon: Facebook, href: "https://21st.dev/?ref=ruixen", label: "Facebook" },
]}
columns={[
{
title: "FEATURES",
links: [
{
label: "Task Management",
href: "https://21st.dev/?ref=ruixen",
},
{
label: "Gantt Charts",
href: "https://21st.dev/?ref=ruixen",
badge: "Pro",
},
{ label: "Time Tracking", href: "https://21st.dev/?ref=ruixen" },
{
label: "Resource Allocation",
href: "https://21st.dev/?ref=ruixen",
},
{ label: "Automation", href: "https://21st.dev/?ref=ruixen" },
],
},
{
title: "RESOURCES",
links: [
{ label: "Blog", href: "https://21st.dev/?ref=ruixen" },
{
label: "Webinars",
href: "https://21st.dev/?ref=ruixen",
badge: "New",
},
{ label: "Case Studies", href: "https://21st.dev/?ref=ruixen" },
{ label: "Help Center", href: "https://21st.dev/?ref=ruixen" },
{ label: "Documentation", href: "https://21st.dev/?ref=ruixen" },
],
},
{
title: "COMPANY",
links: [
{ label: "About Us", href: "https://21st.dev/?ref=ruixen" },
{
label: "Careers",
href: "https://21st.dev/?ref=ruixen",
badge: "Hiring",
},
{ label: "Partners", href: "https://21st.dev/?ref=ruixen" },
{ label: "Contact", href: "https://21st.dev/?ref=ruixen" },
{ label: "Press", href: "https://21st.dev/?ref=ruixen" },
],
},
{
title: "LEGAL",
links: [
{ label: "Privacy Policy", href: "https://21st.dev/?ref=ruixen" },
{
label: "Terms of Service",
href: "https://21st.dev/?ref=ruixen",
},
{
label: "Cookie Settings",
href: "https://21st.dev/?ref=ruixen",
},
{ label: "Security", href: "https://21st.dev/?ref=ruixen" },
],
},
{
title: "COMMUNITY",
links: [
{ label: "Forums", href: "https://21st.dev/?ref=ruixen" },
{ label: "Events", href: "https://21st.dev/?ref=ruixen" },
{ label: "Open Source", href: "https://21st.dev/?ref=ruixen" },
{ label: "Ambassadors", href: "https://21st.dev/?ref=ruixen" },
],
},
]}
/>
</div>
);
}
Part of Ruixen UI — browse the full library on 21st.dev.