Glass Search BarGlassmorphism search bar with animated suggestion dropdown, active state glow, and reduced-motion support.
.png)
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-search-barFor 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 Search Bar
Glass Search Bar is a glassmorphism search field with an animated suggestion dropdown that opens on focus, an active-state glow when typing, and a reduced-motion fallback for users who prefer less animation. Motion handles the dropdown entrance and the focus-state highlight, while the glass surface uses backdrop-filter for the blur. It works well as a global search in SaaS shells, a sticky search header on marketing sites, and a command-palette trigger inside dashboards.
Built with
Frequently asked questions
- Is Glass Search Bar free to use?
- Yes. Glass Search Bar 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 Search Bar?
- One command: npx shadcn@latest add https://aicanvas.me/r/glass-search-bar.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Glass Search Bar 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 Search Bar built with?
- Glass Search Bar is built with React and TypeScript, using Motion and Tailwind CSS.
- Where would I use Glass Search Bar?
- Common uses include Marketing site, SaaS, and Dashboard. Like every AI Canvas component, it is self-contained and drops into any React project.
- Can I remix Glass Search Bar with AI?
- Yes. Glass Search Bar 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