8-Bit Synthwave Arcade Footer

footers

Retro arcade neon synthwave footer with highscore ticker and credits count.

#footer#retro#arcade#synthwave#8bit

Live Interactive Preview

Component Source Code

Select language in the dropdown

RetroArcadeFooter.tsx

1'use client';
2
3import React from 'react';
4import { Gamepad2 } from 'lucide-react';
5
6export default function RetroArcadeFooter() {
7  return (
8    <footer className="w-full max-w-5xl mx-auto rounded-2xl border-4 border-fuchsia-500 bg-slate-950 p-8 sm:p-10 font-mono text-fuchsia-400 shadow-[0_0_30px_rgba(217,70,239,0.25)] select-none">
9      <div className="flex flex-col md:flex-row items-center justify-between gap-6 pb-6 border-b-2 border-fuchsia-500/40">
10        <div className="flex items-center gap-3">
11          <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-fuchsia-500 text-slate-950 font-black">
12            <Gamepad2 className="h-6 w-6" />
13          </div>
14          <div>
15            <h4 className="font-black text-base uppercase tracking-wider text-yellow-300">AURENZA_ARCADE_UI</h4>
16            <p className="text-xs text-fuchsia-300">8-BIT SYNTHWAVE DESIGN SYSTEM</p>
17          </div>
18        </div>
19
20        <div className="flex gap-4 text-xs font-bold text-cyan-400">
21          <span className="bg-fuchsia-950/80 border border-fuchsia-500/40 px-3 py-1.5 rounded">CREDITS: 99</span>
22          <span className="bg-yellow-950/80 border border-yellow-500/40 text-yellow-400 px-3 py-1.5 rounded animate-pulse">PRESS START</span>
23        </div>
24      </div>
25
26      <div className="flex flex-col sm:flex-row items-center justify-between gap-4 pt-6 text-[11px] text-fuchsia-500">
27        <p>© 2026 AURENZA_UI. ALL LEVEL MAPS UNLOCKED.</p>
28        <span className="text-yellow-400 font-bold tracking-widest">HIGHSCORE: 999,990</span>
29      </div>
30    </footer>
31  );
32}

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

Step 4: Usage Example

ExamplePage.tsx

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