Is there a shadcn liquid glass navbar component for React?

Yes. STARCK UI ships the Liquid Glass Navbar as React source through its shadcn registry.

What does the Liquid Glass Navbar include?

It renders responsive mobile and desktop navigation, accepts brand, logo, links and CTA props, and supports expandable or fixed desktop width.

What happens outside Chromium browsers?

The component uses a backdrop-blur fallback when its Chromium SVG refraction filter is not active.

Liquid Glass Navbar

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

Yes. STARCK UI ships a shadcn-compatible Liquid Glass Navbar for React as source you add to your project. It renders separate responsive mobile and desktop navigation, with a brand, optional version, logo, CTA, and desktop links.

The desktop navbar can use expandable or fixed width. When reduced motion is preferred, its expandable desktop width resolves to a fixed width instead of using the scroll-driven width transform.

The glass effect uses an SVG displacement filter in Chromium. In other browsers the source applies a backdrop blur fallback. Both rendered navigation elements have the accessible name “Main navigation”; the example keeps the preview and Usage code on the same canonical data.

Install it with the component page command, then pass only the props your product needs. The documentation preview and Usage code use liquidGlassNavbarExample, whose width behavior starts as expandable. The registry source owns independent prop defaults.

Updated October 5, 2026. Provenance: used in SessionWatcher and Moorline, as recorded in the generated component provenance.

FAQ

Is there a shadcn liquid glass navbar component for React?: Yes. STARCK UI ships the Liquid Glass Navbar as React source through its shadcn registry.
What does the Liquid Glass Navbar include?: It renders responsive mobile and desktop navigation, accepts brand, logo, links and CTA props, and supports expandable or fixed desktop width.
What happens outside Chromium browsers?: The component uses a backdrop-blur fallback when its Chromium SVG refraction filter is not active.

Used in

SessionWatcher ↗

Moorline ↗

Liquid interface

Navigation with depth.

Scroll to watch color and detail move beneath the glass.

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.

A geometric facade with colorful windows

Install

Add the source directly to your shadcn project.

pnpm dlx shadcn@latest add @starck/liquid-glass-navbar

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"
/>