Neo-Brutalist High-Contrast Footer

footers

Stark black borders with heavy offset shadows and bold yellow neo-brutalist typography.

#footer#brutalist#bold#contrast

Live Interactive Preview

Component Source Code

Select language in the dropdown

BrutalFooter.tsx

1'use client';
2
3import React from 'react';
4import { ArrowUpRight } from 'lucide-react';
5
6export default function BrutalFooter() {
7  return (
8    <footer className="w-full max-w-5xl mx-auto border-4 border-black bg-yellow-300 p-8 sm:p-12 font-mono text-black shadow-[8px_8px_0px_#000] select-none">
9      <div className="grid grid-cols-1 md:grid-cols-4 gap-8 pb-8 border-b-4 border-black">
10        <div className="md:col-span-2 space-y-3">
11          <div className="flex items-center gap-2">
12            <div className="h-8 w-8 bg-black text-yellow-300 flex items-center justify-center font-black text-sm border-2 border-black">
13              AU
14            </div>
15            <span className="font-black text-xl tracking-tight uppercase">AURENZA_UI</span>
16          </div>
17          <p className="text-xs font-bold leading-relaxed max-w-sm">
18            NO FLUFF. PURE HARD-EDGED COMPONENT POWER. COPY, PASTE, SHIP.
19          </p>
20          <div className="pt-2">
21            <span className="inline-block border-2 border-black bg-white px-3 py-1 text-xs font-black uppercase shadow-[2px_2px_0px_#000]">
22              ZERO_DEPENDENCIES_100%
23            </span>
24          </div>
25        </div>
26
27        <div>
28          <h4 className="font-black text-xs uppercase tracking-wider mb-3 border-b-2 border-black pb-1 inline-block">NAV_INDEX</h4>
29          <ul className="space-y-1.5 text-xs font-bold">
30            <li><a href="#" className="hover:bg-black hover:text-yellow-300 px-1 transition inline-block">BUTTONS</a></li>
31            <li><a href="#" className="hover:bg-black hover:text-yellow-300 px-1 transition inline-block">NAVBARS</a></li>
32            <li><a href="#" className="hover:bg-black hover:text-yellow-300 px-1 transition inline-block">CARDS</a></li>
33            <li><a href="#" className="hover:bg-black hover:text-yellow-300 px-1 transition inline-block">EFFECTS</a></li>
34          </ul>
35        </div>
36
37        <div>
38          <h4 className="font-black text-xs uppercase tracking-wider mb-3 border-b-2 border-black pb-1 inline-block">CHANNELS</h4>
39          <ul className="space-y-1.5 text-xs font-bold">
40            <li><a href="#" className="hover:bg-black hover:text-yellow-300 px-1 transition inline-flex items-center gap-1">GITHUB <ArrowUpRight className="h-3 w-3" /></a></li>
41            <li><a href="#" className="hover:bg-black hover:text-yellow-300 px-1 transition inline-flex items-center gap-1">TWITTER <ArrowUpRight className="h-3 w-3" /></a></li>
42            <li><a href="#" className="hover:bg-black hover:text-yellow-300 px-1 transition inline-flex items-center gap-1">DISCORD <ArrowUpRight className="h-3 w-3" /></a></li>
43          </ul>
44        </div>
45      </div>
46
47      <div className="flex flex-col sm:flex-row items-center justify-between gap-4 pt-6 text-xs font-black uppercase">
48        <p>© 2026 AURENZA_UI // ALL RIGHTS RESERVED.</p>
49        <span className="bg-black text-white px-3 py-1 text-[11px] shadow-[2px_2px_0px_#fff]">
50          V2.4.0 // PRODUCTION_READY
51        </span>
52      </div>
53    </footer>
54  );
55}

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

Step 4: Usage Example

ExamplePage.tsx

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