Glass DockGlassmorphism macOS-style dock with cursor-proximity magnification.

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 Dock

Glass Dock is a macOS-inspired dock bar where each icon scales up as your cursor approaches, with spring physics that propagate gently to the neighbouring icons. The glassmorphism backdrop, blur, and edge highlight all use native backdrop-filter so the dock picks up the page behind it. Motion handles the proximity-based scaling without re-rendering each icon, which keeps things smooth even with a dozen entries. Use it as the navigation rail for an editor, dashboard, or web-app shell that wants a tactile, desktop-class feel.

Built with

Frequently asked questions

Is Glass Dock free to use?

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

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

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

Where would I use Glass Dock?

Common uses include Dashboard, Editor, and Mobile app. Like every AI Canvas component, it is self-contained and drops into any React project.

Can I remix Glass Dock with AI?

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