Glass User MenuFrosted glass user avatar trigger with animated dropdown, grouped menu items, and Log Out.

Add to your project

One command adds this component to your project.

Install with AI Canvas MCP

With AI Canvas MCP, your AI knows every component we ship. Ask for one inside Claude Code, Codex, or Cursor and it installs the component you pick. Works with any AI Canvas account, free or premium.

About Glass User Menu

Glass User Menu is a frosted-glass avatar button that opens a dropdown with grouped menu items, dividers, and a final Log Out action. The dropdown animates in with a small Motion-driven slide and fade, and the glass surface keeps it visually consistent with the rest of a glassmorphism design system. It slots cleanly into the top-right of any SaaS shell, dashboard chrome, or marketing site that already has an authenticated state.

Built with

Frequently asked questions

Is Glass User Menu free to use?

Yes. Glass User Menu is part of the free AI Canvas library and is open source under the MIT license, so you can use it in personal and commercial projects.

How do I install Glass User Menu?

One command: npx shadcn@latest add https://aicanvas.me/r/glass-user-menu.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Glass User Menu for you. You can also copy the source straight from the Code tab, no account needed. It works in any React project with Tailwind CSS.

What is Glass User Menu built with?

Glass User Menu is built with React and TypeScript, using Motion and Tailwind CSS.

Where would I use Glass User Menu?

Common uses include SaaS, Dashboard, and Marketing site. Like every AI Canvas component, it is self-contained and drops into any React project.

Can I remix Glass User Menu with AI?

Yes. Glass User Menu ships with expert prompts for Claude Code, Lovable, and V0, so you can recreate and customize it in your AI builder of choice.

Featured in collections