Neumorphic Soft Extruded Footer

footers

Tactile neumorphic soft shadows with dual recessed and extruded tactile pill buttons.

#footer#neumorphic#soft#tactile#3d

Live Interactive Preview

Component Source Code

Select language in the dropdown

NeumorphicFooter.tsx

1'use client';
2
3import React from 'react';
4
5export default function NeumorphicFooter() {
6  return (
7    <footer
8      style={{
9        boxShadow: '10px 10px 20px #cbd5e1, -10px -10px 20px #ffffff'
10      }}
11      className="w-full max-w-5xl mx-auto rounded-3xl bg-slate-100 dark:bg-slate-900 p-8 sm:p-10 select-none transition-all"
12    >
13      <div className="flex flex-col sm:flex-row items-center justify-between gap-6 pb-6 border-b border-slate-200 dark:border-slate-800">
14        <div className="flex items-center gap-3">
15          <div
16            style={{
17              boxShadow: 'inset 3px 3px 6px #cbd5e1, inset -3px -3px 6px #ffffff'
18            }}
19            className="flex h-10 w-10 items-center justify-center rounded-2xl bg-slate-100 dark:bg-slate-900 text-slate-800 dark:text-slate-100 font-black text-sm"
20          >
21            AU
22          </div>
23          <div>
24            <h4 className="font-extrabold text-sm text-slate-800 dark:text-slate-100">AurenzaUI Tactile</h4>
25            <p className="text-xs text-slate-500">Physical depth &amp; extruded shadows.</p>
26          </div>
27        </div>
28
29        <div className="flex gap-4">
30          {['Components', 'Tokens', 'Playground', 'Support'].map((link) => (
31            <a
32              key={link}
33              href="#"
34              style={{
35                boxShadow: '4px 4px 8px #cbd5e1, -4px -4px 8px #ffffff'
36              }}
37              className="rounded-xl px-3.5 py-1.5 text-xs font-semibold text-slate-700 dark:text-slate-300 hover:text-blue-600 transition"
38            >
39              {link}
40            </a>
41          ))}
42        </div>
43      </div>
44
45      <div className="pt-4 text-center sm:text-left text-xs text-slate-400">
46        © 2026 AurenzaUI. Precision tactile neumorphic design tokens.
47      </div>
48    </footer>
49  );
50}

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

Step 4: Usage Example

ExamplePage.tsx

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