Glass Menu for React

Preview

Demos ready. Update 0.

Installation

First add the exact @glassyui mapping to components.json as shown in Getting Started. Then run the pinned item command:

Install Glass Menu

pnpm dlx shadcn@4.14.1 add @glassyui/glass-menu

What this installs11 files, 2 packages

Direct registry declarations

These values belong to @glassyui/glass-menu itself in registry.json.

Package dependencies

@radix-ui/react-dropdown-menu
clsx

Registry dependencies

@glassyui/glass-panel

File targets

components/glassyui/glass-menu.tsx

Complete installed closure

This follows every namespaced registry dependency recursively and de-duplicates the packages and target files installed with this item.

Package dependencies

@radix-ui/react-dropdown-menu
clsx

Installed files

components/glassyui/glass-menu.tsx
components/glassyui/glass-panel.tsx
components/glassyui/glass-surface.tsx
components/glassyui/lib/merge-refs.ts
components/glassyui/lib/refraction-map.ts
components/glassyui/lib/use-refraction-filter.tsx
components/glassyui/lib/scene-context.ts
components/glassyui/glass-provider.tsx
components/glassyui/liquid-filters.tsx
components/glassyui/lib/preferences.ts
components/glassyui/styles/liquid.css

Usage

import { GlassMenu, GlassMenuContent, GlassMenuItem, GlassMenuShortcut, GlassMenuTrigger } from "@/components/glassyui/glass-menu";

export function MenuDemo() {
  return (
    <GlassMenu>
      <GlassMenuTrigger>Edit</GlassMenuTrigger>
      <GlassMenuContent>
        <GlassMenuItem>
          Undo <GlassMenuShortcut>⌘Z</GlassMenuShortcut>
        </GlassMenuItem>
        <GlassMenuItem tone="destructive">Delete</GlassMenuItem>
      </GlassMenuContent>
    </GlassMenu>
  );
}

Examples

Options and submenus

<GlassMenuContent>
  <GlassMenuLabel>View</GlassMenuLabel>
  <GlassMenuCheckboxItem checked={showGrid} onCheckedChange={setShowGrid}>
    Show grid
  </GlassMenuCheckboxItem>
  <GlassMenuSeparator />
  <GlassMenuSub>
    <GlassMenuSubTrigger>Sort by</GlassMenuSubTrigger>
    <GlassMenuSubContent>
      <GlassMenuRadioGroup value={sort} onValueChange={setSort}>
        <GlassMenuRadioItem value="name">Name</GlassMenuRadioItem>
        <GlassMenuRadioItem value="date">Date</GlassMenuRadioItem>
      </GlassMenuRadioGroup>
    </GlassMenuSubContent>
  </GlassMenuSub>
</GlassMenuContent>

API

GlassMenu

Radix DropdownMenu root. Non-modal by default, so the page keeps its scroll; pass modal to lock it.

GlassMenuTrigger

Radix trigger primitive.

GlassMenuContent

Portal-backed glass panel. sideOffset defaults to 8.

GlassMenuItem

Menu item with inset and tone (default or destructive) options.

GlassMenuCheckboxItem / GlassMenuRadioItem

Stateful items with a check or dot indicator.

GlassMenuGroup / GlassMenuRadioGroup

Radix grouping primitives.

GlassMenuLabel / GlassMenuSeparator

Section label and hairline divider.

GlassMenuShortcut

Right-aligned keyboard shortcut hint.

GlassMenuSub / GlassMenuSubTrigger / GlassMenuSubContent

Nested submenu with a chevron trigger.

Notes

Keyboard

Radix handles arrow keys, typeahead, Escape, and submenu opening with the right arrow key.

Right to left

Indents, shortcuts, and the submenu chevron use logical properties and flip in right-to-left layouts.

Accessibility

Keep the Radix-backed semantics intact and preserve visible labels, focus states, and keyboard operation when copying the source.

Performance

Use provider quality preferences for dense app screens. Reserve strong refraction for hero or showcase surfaces.