Glass Menu

Component

About

A dropdown menu rendered on a frosted liquid-glass surface, with items, checkboxes, labels, separators and keyboard shortcuts, for app menus and context actions.

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

Code

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

Usage.tsx

"use client";

import * as React from "react";
import {
  GlassMenu,
  GlassMenuTrigger,
  GlassMenuContent,
  GlassMenuItem,
  GlassMenuCheckboxItem,
  GlassMenuLabel,
  GlassMenuSeparator,
  GlassMenuShortcut,
} from "@/components/ui/glass-menu";

export default function GlassMenuDemo() {
  const [showActivity, setShowActivity] = React.useState(true);

  return (
    <div className="flex min-h-[420px] w-full items-center justify-center bg-gradient-to-br from-accent to-background p-10 text-foreground">
      <GlassMenu>
        <GlassMenuTrigger className="rounded-full border border-border bg-background/80 px-4 py-2 text-sm font-medium text-foreground shadow-sm outline-none">
          Open menu
        </GlassMenuTrigger>
        <GlassMenuContent>
          <GlassMenuLabel>My Account</GlassMenuLabel>
          <GlassMenuSeparator />
          <GlassMenuItem>
            Profile
            <GlassMenuShortcut>⌘P</GlassMenuShortcut>
          </GlassMenuItem>
          <GlassMenuItem>
            Billing
            <GlassMenuShortcut>⌘B</GlassMenuShortcut>
          </GlassMenuItem>
          <GlassMenuSeparator />
          <GlassMenuCheckboxItem
            checked={showActivity}
            onCheckedChange={setShowActivity}
          >
            Show Activity
          </GlassMenuCheckboxItem>
          <GlassMenuSeparator />
          <GlassMenuItem variant="destructive">Log out</GlassMenuItem>
        </GlassMenuContent>
      </GlassMenu>
    </div>
  );
}