Is Glass Navbar free to use?

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

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

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

Where would I use Glass Navbar?

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

Can I remix Glass Navbar with AI?

Yes. Glass Navbar ships with one comprehensive AI prompt written against the real source code. Open "Remix with AI" on this page to read and copy it into Claude, Cursor, ChatGPT, or any AI tool. Prompts are for remixing your own variation; for the exact component, install it with the one-command CLI.

Glass NavbarFrosted glass navigation bar with animated active tab indicator, ambient color blobs, and spring-physics entrance.

NavigationGlassMarketing siteSaaSPortfolio

Add to your project

One command adds this component to your project.

Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.

npx shadcn@latest add @aicanvas/glass-navbar

Free account required. Signed out, this installs a placeholder file instead of the component.

For dark mode, add the dark class to your <html> element:

Optional

<html class="dark">

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.

Get MCP

About Glass Navbar

Glass Navbar is a frosted glassmorphism top bar with an animated active-tab pill that slides between sections, ambient color blobs in the background to give the surface depth, and a spring-physics entrance so the bar settles in rather than popping. Everything is built with Motion plus Tailwind, no portal magic required, and the glass effect uses native backdrop-filter so it adapts to whatever content scrolls beneath. It is the right pick for marketing sites, SaaS dashboards, and portfolios that want a modern, transparent header without sacrificing legibility.

Built with

MotionTailwind CSS

Frequently asked questions

Is Glass Navbar free to use?: Yes. Glass Navbar 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 Navbar?: One command: npx shadcn@latest add https://aicanvas.me/r/glass-navbar.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Glass Navbar 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 Navbar built with?: Glass Navbar is built with React and TypeScript, using Motion and Tailwind CSS.
Where would I use Glass Navbar?: Common uses include Marketing site, SaaS, and Portfolio. Like every AI Canvas component, it is self-contained and drops into any React project.
Can I remix Glass Navbar with AI?: Yes. Glass Navbar ships with one comprehensive AI prompt written against the real source code. Open "Remix with AI" on this page to read and copy it into Claude, Cursor, ChatGPT, or any AI tool. Prompts are for remixing your own variation; for the exact component, install it with the one-command CLI.