Gooey Search
An organic expanding search bar interaction powered by an SVG goo filter, spring expansion physics, and roving action bubbles.
⌘ K
Installation
$ npx shadcn@latest add https://akshitr.com/r/gooey-search.json
Usage
import GooeySearch from "@/components/gooey-search";
export default function Example() {
return (
<GooeySearch
placeholder="Search projects, experiments..."
onSubmit={(query) => console.log("Searching:", query)}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
placeholder | string | "Search projects, experiments..." | Input placeholder text when open. |
collapsedWidth | number | 154 | Base pill width when in compact closed state. |
expandedWidth | number | 320 | Expanded input bar width when opened. |
bubbleOffset | number | 52 | Separation offset of the trailing action bubble. |
shortcutHint | string | "⌘ K" | Shortcut indicator badge shown when closed. |
onSubmit | (val: string) => void | - | Callback fired on Enter key press. |
Use Cases
- Command Palette & Global Search: Trigger quick search with keyboard shortcuts (
⌘ K) and expand smoothly into an active input. - Header & Navbar Search Pill: Keep top navigation bars minimal by collapsing into a compact pill until clicked or focused.
- Documentation & Blog Query Inputs: Provide real-time instant searching for component docs, articles, or resources with liquid physics.
- Filter Bars for Media & Asset Libraries: Allow fast keyword filtering across templates, components, and media galleries.
