sheetOpen / defaultSheetOpen / onSheetOpenChangeuncontrolled, closed
boolean / boolean / (open: boolean) => voidOpen state of the phone sheet (menu button, links, Escape, the scrim). Close it on route change when you use client-side links.
secondary{ label: "Sign in", href: "#" }
{ label: string; href: string } | nullQuiet link before the call to action. Pass null to hide it.
cta{ label: "Start free", href: "#" }
{ label: string; href?: string; onClick?: (e: MouseEvent) => void } | nullPrimary pill with the arrow chip. Collapses to just the arrow when condensed. onClick receives the event. Pass null to hide it.
condensed–
booleanControlled condensed state; overrides condenseOnScroll.
condenseOnScroll{ threshold: 40 }
boolean | { threshold: number; target?: RefObject<HTMLElement> }Condense after scrolling past the threshold, on window or a scroll container. false disables.
motion"full"
"full" | "subtle" | "off"full: the designed motion. subtle: calm curve, shorter, no staggers. off: instant. prefers-reduced-motion is always respected (150ms fades). "smooth" and "calm" from 1.0 still work.
layout"auto"
"auto" | "desktop" | "mobile"Below the breakpoint (720px) the bar becomes a phone pill (brand, compact CTA, menu button) that grows into a full-height glass sheet with the links, the Product accordion, Sign in and the CTA. auto switches in CSS, so phones never flash the desktop bar.
mobile–
{ menuFooter?: ReactNode }Phone sheet options. menuFooter replaces the status line under the buttons; null hides it.
soundtrue
boolean | "subtle"true plays Lumen cues when a GlassSoundProvider enables sound; false silences this instance; "subtle" plays at 55%. Without a provider nothing plays and the engine never loads.
theme"system"
"system" | "dark" | "light"system follows a .dark / .light class or data-theme on an ancestor (next-themes, shadcn), else the OS setting. Both themes share every size and timing.
breakpoint720
numberViewport width (px) where layout="auto" switches to the phone pill. The desktop bar also hides its link row below it, and the open sheet locks page scroll only below it. Viewport based on purpose (the pill is fixed page chrome); for a narrow column force layout="mobile" or "desktop".
menuWidth560
number | stringWidth of the desktop mega-menu. The panel centres under the bar and slides to stay 8px inside the viewport; it never gets wider than the viewport minus 16px.
zIndex50
numberz-index of the fixed phone pill; the scrim sits 10 below. The desktop bar is z-10 (override with className).
linkComponent"a"
React.ElementTypeRenders every link (brand, items, menu rows, feature card, Sign in, an href CTA) for client-side routing, e.g. Next.js Link. It receives href, className, style, children, ref, onClick, onMouseEnter, onFocus, tabIndex and aria-* props and must render an <a> that forwards ref (the lens measures links).
labelsdefaultGlassNavLabels
Partial<GlassNavLabels>Built-in strings: nav (landmark name, "Main"), openMenu, closeMenu (phone menu button), status ("ALL SYSTEMS NORMAL" in the sheet). Unset keys keep the defaults.
aria-label"Main"
stringAccessible name of the nav landmark(s). Same as labels.nav; this wins.
as"div"
"div" | "header"Root element. "header" makes the root a banner landmark.
className / style–
string / CSSPropertiesApplied to the root (the bar's box at desktop widths). Use style for CSS variables such as --glass-accent or --lg-* tokens. Below the breakpoint the root is display: contents, so box styles only apply to the desktop bar.
ref–
Ref<HTMLElement>The root element (React 19 ref prop). In the phone layout it has no box of its own (display: contents).
...rest–
HTMLAttributesid, data-*, aria-* and on* handlers go to the root.
CSS: --glass-accent (-dark / -light)unset (monochrome CTA gradient)
CSS variableFill of the call to action (bar and sheet) and the active-link dot in the sheet. Set on the root or any ancestor.
CSS: --glass-nav-cta-fg (-dark / -light)unset (#0b0c10 dark, #f5f6f8 light)
CSS variableText colour of the call to action; set it with --glass-accent to keep 4.5:1 contrast.
CSS: --glass-good (-dark / -light)unset (white / ink)
CSS variableDot of the status line in the phone sheet.
CSS: --glass-safe-top / --glass-vhenv(safe-area-inset-top) / 100dvh
CSS variableTop inset and viewport height the fixed phone pill and sheet use. Override inside previews or custom shells.
CSS: --lg-* tokens–
CSS variablesEvery surface, text and shadow token (--lg-ctaBg, --lg-barBg, --lg-muted …). They are declared on the root per theme, so override them through style or a selector on the root itself.
