Glass NavbarFrosted glass navigation bar with animated active tab indicator, ambient color blobs, and spring-physics entrance.
.png?updatedAt=1775223702866)
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-navbarFor dark mode, add the dark class to your <html> element:
<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.
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
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 expert prompts for Claude Code, Lovable, and V0, so you can recreate and customize it in your AI builder of choice.
AI Canvas