Glass ModalCentered dialog with deep glass blur, scale-spring entrance, and staggered content reveal.

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 Modal

Glass Modal is a centered dialog with deep glass blur on the backdrop, a scale-spring entrance for the panel, and a staggered content reveal so the header, body, and actions land in sequence rather than as one block. Motion handles the entrance choreography; the glass surface uses backdrop-filter so the dialog sits convincingly over any background. It is the default modal for SaaS settings, marketing-site confirmations, and any dashboard flow where the interruption needs to feel intentional.

Built with

Frequently asked questions

Is Glass Modal free to use?

Yes. Glass Modal 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 Modal?

One command: npx shadcn@latest add https://aicanvas.me/r/glass-modal.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Glass Modal 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 Modal built with?

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

Where would I use Glass Modal?

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

Can I remix Glass Modal with AI?

Yes. Glass Modal 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