Glass Context Menu

Component

About

A right-click context menu with a frosted-glass backdrop, supporting nested submenus, checkbox items, and radio groups, built on Radix ContextMenu.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Glass Context Menu to your project and fits it to your theme.

Code

How Glass Context Menu is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import * as React from "react";
import {
  GlassContextMenu,
  GlassContextMenuTrigger,
  GlassContextMenuContent,
  GlassContextMenuItem,
  GlassContextMenuCheckboxItem,
  GlassContextMenuRadioGroup,
  GlassContextMenuRadioItem,
  GlassContextMenuLabel,
  GlassContextMenuSeparator,
  GlassContextMenuShortcut,
} from "@/components/ui/glass-context-menu";

export default function GlassContextMenuDemo() {
  const [showBookmarks, setShowBookmarks] = React.useState(true);
  const [person, setPerson] = React.useState("pedro");

  return (
    <div className="flex h-screen w-full items-center justify-center bg-[var(--background)] text-[var(--foreground)]">
      <GlassContextMenu>
        <GlassContextMenuTrigger className="flex h-48 w-72 items-center justify-center rounded-2xl border border-dashed border-[var(--border)] text-sm text-[var(--muted-foreground)]">
          Right click here
        </GlassContextMenuTrigger>
        <GlassContextMenuContent className="w-56">
          <GlassContextMenuItem>
            Back
            <GlassContextMenuShortcut>⌘[</GlassContextMenuShortcut>
          </GlassContextMenuItem>
          <GlassContextMenuItem disabled>
            Forward
            <GlassContextMenuShortcut>⌘]</GlassContextMenuShortcut>
          </GlassContextMenuItem>
          <GlassContextMenuItem>
            Reload
            <GlassContextMenuShortcut>⌘R</GlassContextMenuShortcut>
          </GlassContextMenuItem>
          <GlassContextMenuSeparator />
          <GlassContextMenuCheckboxItem
            checked={showBookmarks}
            onCheckedChange={setShowBookmarks}
          >
            Show Bookmarks
          </GlassContextMenuCheckboxItem>
          <GlassContextMenuSeparator />
          <GlassContextMenuLabel>People</GlassContextMenuLabel>
          <GlassContextMenuRadioGroup value={person} onValueChange={setPerson}>
            <GlassContextMenuRadioItem value="pedro">
              Pedro Duarte
            </GlassContextMenuRadioItem>
            <GlassContextMenuRadioItem value="colm">
              Colm Tuite
            </GlassContextMenuRadioItem>
          </GlassContextMenuRadioGroup>
        </GlassContextMenuContent>
      </GlassContextMenu>
    </div>
  );
}