Classic SaaS Multi-Column Footer

footers

Clean 5-column software directory footer with live system operational status badge and social links.

#footer#saas#directory#responsive

Live Interactive Preview

Component Source Code

Select language in the dropdown

ClassicSaaSFooter.tsx

1'use client';
2
3import React from 'react';
4import { FaGithub, FaXTwitter, FaDiscord } from 'react-icons/fa6';
5
6export default function ClassicSaaSFooter() {
7  return (
8    <footer className="w-full max-w-5xl mx-auto rounded-3xl border border-slate-200 dark:border-slate-800 bg-white/90 dark:bg-slate-950/80 p-8 sm:p-12 shadow-xl select-none">
9      <div className="grid grid-cols-2 md:grid-cols-5 gap-8 pb-10 border-b border-slate-200 dark:border-slate-800">
10        <div className="col-span-2 space-y-3">
11          <div className="flex items-center gap-2">
12            <div className="h-7 w-7 rounded-lg bg-blue-600 flex items-center justify-center text-white font-bold text-xs">
13              A
14            </div>
15            <span className="font-extrabold text-base text-slate-900 dark:text-white">AurenzaUI</span>
16          </div>
17          <p className="text-xs text-slate-500 dark:text-slate-400 max-w-xs leading-relaxed">
18            The next-generation spatial UI kit for modern web applications. Zero dependencies, pure Tailwind.
19          </p>
20          <div className="flex items-center gap-3 pt-2 text-slate-400">
21            <a href="#" className="hover:text-blue-500 transition"><FaGithub className="h-4 w-4" /></a>
22            <a href="#" className="hover:text-blue-500 transition"><FaXTwitter className="h-4 w-4" /></a>
23            <a href="#" className="hover:text-blue-500 transition"><FaDiscord className="h-4 w-4" /></a>
24          </div>
25        </div>
26
27        <div>
28          <h4 className="text-xs font-bold uppercase tracking-wider text-slate-900 dark:text-white mb-3">Product</h4>
29          <ul className="space-y-2 text-xs text-slate-500 dark:text-slate-400">
30            <li><a href="#" className="hover:text-blue-500 transition">Components</a></li>
31            <li><a href="#" className="hover:text-blue-500 transition">Templates</a></li>
32            <li><a href="#" className="hover:text-blue-500 transition">Showcase</a></li>
33            <li><a href="#" className="hover:text-blue-500 transition">Changelog</a></li>
34          </ul>
35        </div>
36
37        <div>
38          <h4 className="text-xs font-bold uppercase tracking-wider text-slate-900 dark:text-white mb-3">Resources</h4>
39          <ul className="space-y-2 text-xs text-slate-500 dark:text-slate-400">
40            <li><a href="#" className="hover:text-blue-500 transition">Documentation</a></li>
41            <li><a href="#" className="hover:text-blue-500 transition">Figma Kit</a></li>
42            <li><a href="#" className="hover:text-blue-500 transition">GitHub</a></li>
43            <li><a href="#" className="hover:text-blue-500 transition">Community</a></li>
44          </ul>
45        </div>
46
47        <div>
48          <h4 className="text-xs font-bold uppercase tracking-wider text-slate-900 dark:text-white mb-3">Legal</h4>
49          <ul className="space-y-2 text-xs text-slate-500 dark:text-slate-400">
50            <li><a href="#" className="hover:text-blue-500 transition">Privacy</a></li>
51            <li><a href="#" className="hover:text-blue-500 transition">Terms</a></li>
52            <li><a href="#" className="hover:text-blue-500 transition">License</a></li>
53          </ul>
54        </div>
55      </div>
56
57      <div className="flex flex-col sm:flex-row items-center justify-between gap-4 pt-6 text-xs text-slate-400">
58        <p>© 2026 AurenzaUI. Built for developers.</p>
59        <div className="flex items-center gap-2">
60          <span className="h-2 w-2 rounded-full bg-emerald-500 animate-pulse" />
61          <span className="text-[11px] font-mono text-slate-500">All systems operational</span>
62        </div>
63      </div>
64    </footer>
65  );
66}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/footers/ClassicSaaSFooter.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import ClassicSaaSMultiColumnFooter from '@/components/footers/ClassicSaaSFooter';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <ClassicSaaSMultiColumnFooter />
7    </main>
8  );
9}