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

First add the @glassyui-native mapping to components.json as shown in the Expo guide. Then add the component and match its packages to your Expo SDK:

Install Glass Menu for React Native

npx shadcn@4.14.1 add @glassyui-native/glass-menu

Match your Expo SDK

npx expo install --fix

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>
  );
}

React Native usage

import { useState } from 'react';
import { GlassButton } from '@/components/glassyui/glass-button';
import {
  GlassMenu,
  GlassMenuCheckboxItem,
  GlassMenuContent,
  GlassMenuItem,
  GlassMenuSeparator,
  GlassMenuTrigger,
} from '@/components/glassyui/glass-menu';

export default function MenuExample() {
  const [pinned, setPinned] = useState(false);

  return (
    <GlassMenu>
      <GlassMenuTrigger>
        <GlassButton>Options</GlassButton>
      </GlassMenuTrigger>
      <GlassMenuContent>
        <GlassMenuItem onSelect={() => setPinned(false)}>Duplicate</GlassMenuItem>
        <GlassMenuCheckboxItem checked={pinned} onCheckedChange={setPinned}>
          Pin to top
        </GlassMenuCheckboxItem>
        <GlassMenuSeparator />
        <GlassMenuItem tone="destructive">Delete</GlassMenuItem>
      </GlassMenuContent>
    </GlassMenu>
  );
}

This example also uses Glass Button. Install everything it uses:

Install example components

npx shadcn@4.14.1 add @glassyui-native/glass-menu @glassyui-native/glass-button

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.