Glassmorphic Floating Capsule Footer

footers

Frosted translucent backdrop-blur capsule footer with social icons.

#footer#glassmorphism#floating#blur

Live Interactive Preview

Component Source Code

Select language in the dropdown

GlassFloatingFooter.tsx

1'use client';
2
3import React from 'react';
4import { Sparkles } from 'lucide-react';
5import { FaGithub, FaXTwitter } from 'react-icons/fa6';
6
7export default function GlassFloatingFooter() {
8  return (
9    <footer className="w-full max-w-5xl mx-auto rounded-3xl border border-white/20 dark:border-white/10 bg-white/70 dark:bg-slate-950/70 backdrop-blur-2xl p-8 sm:p-10 shadow-2xl select-none">
10      <div className="flex flex-col md:flex-row items-center justify-between gap-6 pb-8 border-b border-slate-200/60 dark:border-slate-800/80">
11        <div className="flex items-center gap-3 text-center md:text-left">
12          <div className="h-9 w-9 rounded-2xl bg-gradient-to-tr from-cyan-400 via-blue-500 to-indigo-600 flex items-center justify-center text-white shadow-lg shadow-blue-500/30">
13            <Sparkles className="h-5 w-5" />
14          </div>
15          <div>
16            <h3 className="font-extrabold text-base text-slate-900 dark:text-white">AurenzaUI</h3>
17            <p className="text-xs text-slate-500 dark:text-slate-400">Translucent spatial components with dynamic blur.</p>
18          </div>
19        </div>
20
21        <div className="flex flex-wrap items-center justify-center gap-6 text-xs font-semibold text-slate-600 dark:text-slate-300">
22          <a href="#" className="hover:text-blue-500 transition">Design Specs</a>
23          <a href="#" className="hover:text-blue-500 transition">Showcase</a>
24          <a href="#" className="hover:text-blue-500 transition">Tokens</a>
25          <a href="#" className="hover:text-blue-500 transition">Community</a>
26        </div>
27      </div>
28
29      <div className="flex flex-col sm:flex-row items-center justify-between gap-4 pt-6 text-xs text-slate-500 dark:text-slate-400">
30        <p>© 2026 AurenzaUI. Crafted with spatial optics.</p>
31        <div className="flex items-center gap-3">
32          <a href="#" className="p-2 rounded-full hover:bg-slate-200 dark:hover:bg-slate-800 transition"><FaGithub className="h-4 w-4" /></a>
33          <a href="#" className="p-2 rounded-full hover:bg-slate-200 dark:hover:bg-slate-800 transition"><FaXTwitter className="h-4 w-4" /></a>
34        </div>
35      </div>
36    </footer>
37  );
38}

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

Step 4: Usage Example

ExamplePage.tsx

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