Minimal Clean Linear Footer

footers

Ultra-minimal single row typography footer with micro-links and copyright text.

#footer#minimal#clean#simple

Live Interactive Preview

Component Source Code

Select language in the dropdown

MinimalCleanFooter.tsx

1'use client';
2
3import React from 'react';
4
5export default function MinimalCleanFooter() {
6  return (
7    <footer className="w-full max-w-5xl mx-auto border-t border-slate-200 dark:border-slate-800 bg-white/50 dark:bg-slate-950/50 px-6 py-8 select-none transition-colors">
8      <div className="flex flex-col sm:flex-row items-center justify-between gap-6">
9        <div className="flex items-center gap-2">
10          <div className="h-6 w-6 rounded-md bg-slate-900 dark:bg-white flex items-center justify-center text-white dark:text-slate-900 font-bold text-xs">
11            ▲
12          </div>
13          <span className="font-bold text-sm tracking-tight text-slate-900 dark:text-white">AurenzaUI</span>
14        </div>
15
16        <div className="flex items-center gap-8 text-xs font-medium text-slate-500 dark:text-slate-400">
17          <a href="#" className="hover:text-slate-900 dark:hover:text-white transition">Documentation</a>
18          <a href="#" className="hover:text-slate-900 dark:hover:text-white transition">Components</a>
19          <a href="#" className="hover:text-slate-900 dark:hover:text-white transition">Templates</a>
20          <a href="#" className="hover:text-slate-900 dark:hover:text-white transition">GitHub</a>
21        </div>
22
23        <p className="text-xs text-slate-400">© 2026 AurenzaUI</p>
24      </div>
25    </footer>
26  );
27}

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/MinimalCleanFooter.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

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