STARCK UI

Liquid Glass Navbar

The SessionWatcher navbar, including responsive layouts, expandable or fixed width, Chromium refraction, and a graceful blur fallback.

Used inSessionWatcher ↗Moorline ↗

Liquid interface

Navigation with depth.

Scroll to watch color and detail move beneath the glass.

Colorful glass architecture

Designed in motion

Clarity that changes with context.

The surface picks up color, edges, and detail from whatever moves behind it. Navigation stays readable while the page remains visibly alive beneath the glass.

Colorful flowers in a garden
A geometric facade with colorful windows

Install

Add the source directly to your shadcn project.

pnpm dlx shadcn@latest add https://ui.starck.studio/r/liquid-glass-navbar.json

Usage

<LiquidGlassNavbar
  brand="SessionWatcher"
  version="v7.3.0"
  logoSrc="https://sessionwatcher.com/img/NewLogoModernBlack.png"
  links={[
    { href: "#pricing", label: "Pricing" },
    { href: "#features", label: "Features" },
    { href: "#faq", label: "FAQ" },
  ]}
  ctaHref="#pricing"
  ctaLabel="Get SessionWatcher"
  widthBehavior="expand"
/>