Liquid glass navbar for React, as a bottom tab bar

components/GlassNavbar.tsx (free, Tailwind only)

import Link from "next/link";

const links = [
  { href: "/", label: "Home" },
  { href: "/docs", label: "Docs" },
  { href: "/blog", label: "Blog" },
];

// A frosted top navbar: blur(16px) saturate(1.9), the same glass values as the paid tab bar.
// It needs something colourful behind it; on a flat page it reads as grey.
export function GlassNavbar() {
  return (
    <header className="sticky top-3 z-50 mx-auto w-fit">
      <nav
        aria-label="Main"
        className="flex items-center gap-1 rounded-full border border-white/15 bg-white/10 p-1.5 shadow-[inset_0_1px_0_rgba(255,255,255,.25),0_10px_30px_rgba(0,0,0,.35)] backdrop-blur-lg backdrop-saturate-[1.9]"
      >
        {links.map((l) => (
          <Link
            key={l.href}
            href={l.href}
            className="rounded-full px-4 py-2 text-sm text-white/80 transition-colors hover:bg-white/10 hover:text-white"
          >
            {l.label}
          </Link>
        ))}
      </nav>
    </header>
  );
}

components/LiquidNavbar.tsx (liquid-glass-react, free)

"use client";
import Link from "next/link";
import LiquidGlass from "liquid-glass-react";

// liquid-glass-react 1.1.1 needs React 19. The edge bending shows in Chromium;
// its README says Safari and Firefox only get part of the effect.
// Position it through its own style prop: the glass and its border layers all read
// position, top and left from there and center themselves on that point.
// It sets a 20px system-ui font on what you put inside, so each link sets its own size.
export function LiquidNavbar() {
  return (
    <LiquidGlass
      style={{ position: "fixed", top: "40px", left: "50%", zIndex: 50 }}
      cornerRadius={999}
      padding="6px 10px"
      displacementScale={48}
      blurAmount={0.08}
      saturation={140}
    >
      <nav aria-label="Main" className="flex gap-1 text-white">
        <Link href="/" className="rounded-full px-3 py-1.5 text-sm">Home</Link>
        <Link href="/docs" className="rounded-full px-3 py-1.5 text-sm">Docs</Link>
        <Link href="/blog" className="rounded-full px-3 py-1.5 text-sm">Blog</Link>
      </nav>
    </LiquidGlass>
  );
}

components/tabbar-liquid.css

/* components/tabbar-liquid.css (your copy). Edit 1: the file's first rule was ":root{". */
@scope (.qd-tabbar) to (.qd-screen) {
:scope{font-family:var(--font-ui);color:var(--text);
  --ink:#0A0A0D;--surface:#111218; /* ...every variable that was on :root stays here... */
}
/* ...the rest of the file stays as it is... */

/* Edit 2: hide the demo's 9:41 status bar, then close the @scope block. */
.sb{display:none}
}

app/listen/page.tsx (the wrapper)

// app/listen/page.tsx: give the scoped CSS a root. "native" fills the screen instead of the demo's phone frame.
<div className="h-dvh">
  <div className="qd-tabbar relative h-full">
    <div className="native">
      <LiquidGlassTabBar autoplayDemo={false} data={data} />
    </div>
  </div>
</div>